Question

我有一张脸的图像，当用户将鼠标悬停在菜单上时会从嘴里掉出来。当用户在脸部外面盘旋时，我希望菜单再次返回其原始位置。我遇到的问题是菜单也与面部分开，虽然它实际上位于面部的中间，所以当用户在菜单上盘旋时，动画会反转。

我做过像mouse-events: none;这样的事情，但不幸的是，这并没有解决我的问题。

我的代码看起来像这样

 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>

Answer 1

你可以把菜单放在“面部悬停区”中吗...看看你说你已经把它放在那里了。

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

防止鼠标移出时

1 个答案: