Image Map breaks :hover

Question

I'm having a little bit of trouble with an image map. Using Chrome, I want my navigation image to appear just offscreen, using a negative left margin. When I hover over the part that still appears on the page, it slides out.

That's all fine and dandy. My problem is, I'm using an image map. When my mouse goes over a link, it breaks the animation and puts my nav image away. Here's the code I'm using:

<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">

How can I make it to where hovering over those shapes doesn't put my map away?

Answer 1

Try to put them in separate Div tag and use like as following.

<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>