Question

我对图像映射有点麻烦。使用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">

如何将鼠标悬停在那些形状上并不会使我的地图消失？

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>

图像地图中断：悬停

1 个答案: