如何防止鼠标悬停效果在鼠标离开后不消失

发布于 2024-11-27 08:20:29 字数 1003 浏览 0 评论 0原文

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

<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()，但这没有帮助，因为我从服务器加载图像，需要一些时间才能可见。

那么当鼠标离开所有项目时，什么是隐藏图像的好解决方案呢？谢谢你的帮助。

原文

I am trying to do mouseover and show thumb effect, this is the example code:

<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 script:

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

the demo can be viewed here: http://jsfiddle.net/8zG2Q/2/,

the problem is when mouse over the item quickly, the image does not hide after mouse leaves all the items. I have tried use show() instead of fadeIn(), but this does not help because I load the image from server, it takes time to be visible.

so what could be a nice solution to hide the image whenever mouse is out of all itmes? thanks for help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

奈何桥上唱咆哮 2024-12-04 08:20:29

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

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

Before calling fadeIn(), stop the animation (optionally clearing the queue and also jumping to the end of the animation) then hide the element (resetting to the 'base state'), like so:

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

回复收藏 0 原文

~没有更多了~