图像地图中断：悬停答案

【问题标题】：Image Map breaks :hover图像地图中断：悬停
【发布时间】：2014-11-07 04:16:45
【问题描述】：

我在使用图像映射时遇到了一点问题。使用 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">

我如何才能将鼠标悬停在这些形状上不会让我的地图消失？

【问题讨论】：

标签： html css hover imagemap

【解决方案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>

【讨论】：

我试过它的工作。你可以给区域标签相同的类名，然后在它们上应用 css 以不移动任何地方。