phantom phantom - 1 year ago 98
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 class="face-hover-zone"></div>


var tongueOut = false;

if(tongueOut == false) {;
tongueOut = true;

if(tongueOut == true) {
tongueOut = false;

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download