CODEWITHSUNDEEP
javascriptjquerycss
user6002037
user6002037

Reputation:

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

 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;
		}
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 0

Views: 70

Answers (1)

Andrew Birks
Andrew Birks

Reputation: 890

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

<div class="face-hover-zone">

    <ul>
      <li>Home</li>
      <li>Away</li>
      <li>Results</li>
    </ul>
  
</div>

Upvotes: 1

Related Questions