1

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

气死了。关于修复它的任何想法？

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

奇妙

4

5 回答 5

2

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

于 2011-06-28T14:28:38.607 回答
1

你需要：

  1. 用于.hover()正确处理鼠标移入和移出事件

  2. 记录从返回的定时器句柄setTimeout()

  3. 在每个回调clearTimeout()开始时使用该句柄调用。

请参阅http://jsfiddle.net/alnitak/R7v4H/上的（简化）演示

于 2011-06-28T14:25:44.640 回答
0

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

$(".thumbnailshover").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });
于 2011-06-28T14:27:54.773 回答
0

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

$('#gallery').mouseleave(function(){
    ...
});
于 2011-06-28T14:29:16.673 回答
0

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

正在发生的事情是：

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

于 2011-06-28T14:30:08.507 回答