jQuery mouseover mouseout 函数跳舞答案

【问题标题】：JQuery mouseover mouseout function dancingjQuery mouseover mouseout 函数跳舞
【发布时间】：2011-09-24 09:07:44
【问题描述】：

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

该死的真气。有什么解决办法吗？

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

太棒了

【问题讨论】：

标签： jquery mouseover mouseout

【解决方案1】：

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

【讨论】：

嗯，这并不是真正的错误，它只是事件如何冒泡。所有事件都会发生，即使它发生的地方没有处理程序。 +1 你说得对，尽管 mouseenter 和 mouseleave 用于规避这一点。
我知道这是预期的行为，我应该说“act buggy”（好吧，删掉“are buggy”）;-)

【解决方案2】：

你需要：

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

在http://jsfiddle.net/alnitak/R7v4H/查看（简化的）演示

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

发生了什么：

您的mouseover 和mouseout 事件定义在同一个ID #gallery 上，这意味着当您将鼠标悬停在#gallery 上时，将调用mouseover 函数，但是因为您的叠加层现在是覆盖#gallery，您的鼠标不再“越过”#gallery，而是越过#thumbnails，从而触发mouseout。

【讨论】：