html - 图像映射中断 :hover

Question

我在处理图像 map 时遇到了一些麻烦。使用 Chrome，我希望我的导航图像出现在屏幕外，使用负左边距。当我将鼠标悬停在仍显示在页面上的部分上时，它会滑出。

一切都很好，花花公子。我的问题是，我正在使用图像映射。当我的鼠标经过链接时，它会破坏动画并将我的导航图像移开。这是我正在使用的代码:

<style>
#logonav {
margin-left:-395px;
}

#logonav:hover {
margin-left:0px;
-webkit-animation: navigate .3s ease;
-webkit-animation-iteration-count: 100%;
}
</style>



<img id="logonav" src="logonav.png" usemap="navmap" /><img src="logotitle.png" />

<map id="navmap" name="navmap">
  <area shape="poly" coords="coords" href="home.htm" alt="Home">
  <area shape="poly" coords="coords" href="decks.htm" alt="My Decks">
  <area shape="poly" coords="coords" href="resources.htm" alt="Resources">
  <area shape="poly" coords="coords" href="general.htm" alt="General">
  <area shape="poly" coords="coords" href="about.htm" alt="About">

我怎样才能到达悬停在这些形状上不会收起我的 map 的地方？

Answer 1

尝试将它们放在单独的 Div 标签中，并像下面这样使用。

<style>
#logonav {
margin-left:-395px;
}

#logonav:hover {
margin-left:0px;
-webkit-animation: navigate .3s ease;
-webkit-animation-iteration-count: 100%;
}
</style>

<div style="clear:both">
<img id="logonav" src="logonav.png" usemap="navmap" /><img src="logotitle.png" />
</div>
<div style="clear:both"><map id="navmap" name="navmap">
  <area shape="poly" coords="coords" href="home.htm" alt="Home">
  <area shape="poly" coords="coords" href="decks.htm" alt="My Decks">
  <area shape="poly" coords="coords" href="resources.htm" alt="Resources">
  <area shape="poly" coords="coords" href="general.htm" alt="General">
  <area shape="poly" coords="coords" href="about.htm" alt="About">
</div>