phantom phantom - 1 month ago 12
CSS Question

Prevent mouse out occurring when

I have an image of a face that when a user hovers over a menu drops out of the mouth. When the user hovers outside the face I want the menu to return to its original position again. The issue I am having is that the menu is also separate to the face, although it actually is positioned in the middle of the face, so when the user hovers on the menu the animation is reversed.

I have done things like

mouse-events: none;
but that doesn't solve my issue unfortunately.

My code looks like this

<div id="wrapper">
<div id="face"></div>
</div>

<div class="face-hover-zone"></div>
<ul>
<li>Home</li>
<li>Away</li>
<li>Results</li>
</ul>


JS

var tongueOut = false;

$('.face-hover-zone').mouseover(function(){
if(tongueOut == false) {
animateTongueOut.play();
tongueOut = true;
}
});

$('.face-hover-zone').mouseleave(function(){
if(tongueOut == true) {
animateTongueOut.reverse();
tongueOut = false;
}
});

Answer

Could you put the menu in the "face-hover-zone" div... Seen as you are saying you have positioned it there already.

Comments