Question

我正在尝试鼠标悬停并显示拇指效果，这是示例代码：

<ul>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li> 
   <img class="img" src="http://jsfiddle.net/img/logo.png" style="display:none">
</ul>

Js脚本：

$('li').hover(
  function(e){
    $('.img').css({
        'position':'absolute',
        'left': e.pageX,
        'top': e.pageY
    }).fadeIn();
},
  function(e){
    $('.img').hide();
});

可以在此处查看演示：http://jsfiddle.net/8zG2Q/2/，

问题是当鼠标快速移动到项目上时，鼠标离开所有项目后图像不会隐藏。我尝试使用show（）而不是fadeIn（），但这没有用，因为我从服务器加载图像，需要时间才能看到。

那么，只要鼠标不在所有主题中，隐藏图像的好方法是什么？谢谢你的帮助。

Answer 1

在调用fadeIn()之前，停止动画（可选择清除队列并跳转到动画结尾）然后隐藏元素（重置为“基本状态”），如下所示：

$('li').hover(
  function(e){
    $('.img').css({
        'position':'absolute',
        'left': e.pageX,
        'top': e.pageY
    }).stop(true,true).hide().fadeIn();
},
  function(e){
    $('.img').hide();
});

如何防止mouseleave后鼠标悬停效果不消失

1 个答案: