Question

以下函数会导致在鼠标悬停时在图库上打开框。问题是它不会停止尝试打开和关闭。这与鼠标在图片周围移动时触发的mouseout功能有关。

诅咒真气。有关修复它的想法吗？

$(document).ready(function(){
 $("#gallery, .imageitem, #thumbnails, .thumbs, .cornerimg").mouseover(function(){
     $('#thumbnails').addClass('thumbnailshover');
 });
 $("#gallery").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });
});

非凡

Answer 1

mouseover和mouseout事件在许多浏览器中可能会出错，因为它们会在将元素留在具有处理程序的元素内时触发。 jquery mouseenter和mouseleave事件解决了这个问题（请参阅页面底部的演示）。

Answer 2

你需要：

使用.hover()正确处理鼠标输入和鼠标移出事件
记录从setTimeout()
在每次回调开始时使用该句柄调用clearTimeout()。

在http://jsfiddle.net/alnitak/R7v4H/

Answer 3

尝试将mouseout函数添加到thumbnailshover类而不是#thumbnails对象。然后直到鼠标离开缩略图才会消失。

$(".thumbnailshover").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });

Answer 4

请改用mouseleave。 mouseout的问题在于，当您将鼠标悬停在容器内的元素上时会触发某些浏览器，在本例中为#gallery。

$('#gallery').mouseleave(function(){
    ...
});

Answer 5

我认为您需要在mouseout ID上定义#thumbnails，而这可能只会解决您的问题。

发生的事情是：

您的mouseover和mouseout个事件定义在相同的ID #gallery上，这意味着当您将鼠标悬停在#gallery上mouseover功能时被叫，但是因为你的叠加现在覆盖 #gallery，你的鼠标不再“超过”#gallery，而是超过#thumbnails，从而触发鼠标移开。

JQuery鼠标悬停鼠标功能跳舞

5 个答案: