0

嗨，伙计们，我想知道是否有一种方法可以悬停一些具有相同类名的元素，这些元素并排放置，并且在离开元素区域时会触发动作。例如 ：

<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>

只有当它们离开“hoverme”类的整个区域时，才应该调用下面的“unhover”的javascript。

$('.hoverme').live('mouseover mouseout', function(event) {
            if (event.type == 'mouseover') {

                if(!$("#stage1 td").hasClass("hover"))
                {
                    $("#stage1 td").addClass("hover",200)
                }   
            } 
            else {

                //$("#stage1 td").removeClass("hover",200)

            }
        });

这个动作有办法吗？？

编辑：忘了提到 div 的形状不仅仅是纯粹的正方形。它由几个正方形组成，但最终形状很奇怪。所以我不能用另一个父 div 包装我的 div。

我正在使用 jquery ui，因此我可以使用第二个参数添加类和删除类

4

5 回答 5

1

试试这个：live()不推荐使用你可以使用on()方法：

$('.hoverme').on('mouseover', function(event) {
   $("#stage1 td").addClass("hover")
}).on('mouseout', function() {
   $("#stage1 td").removeClass("hover")
})

http://jsfiddle.net/jUmTt/

于 2012-07-04T03:19:41.637 回答
1

您的意思是每当他们将鼠标悬停在他们都接受hover课程的任何元素上时？试试这个：

var elements = $('.hoverme');
elements.on('hover', function(event) {
  event.type == 'mouseover' ? elements.addClass('hover') : elements.removeClass('hover');
});

或者，您可以重组 HTML 以包装可悬停的元素，即：

<div class="hoverWrap">
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
</div>

然后将悬停事件侦听器附加到hoverWrap. 从语义上讲，这更有意义；仅仅因为标记中的元素彼此靠近并不意味着它们应该被视为一个大元素。

于 2012-07-04T03:22:17.157 回答
1

我不知道，但我认为你正在尝试这样做：

var timer;
$('.hoverme').on('mouseenter mouseleave', function(e) {
    if (e.type === 'mouseenter') {
        clearTimeout(timer);
        if(!$("#stage1 td").hasClass("hover")) {
            $("#stage1 td").addClass("hover")
        }   
    } else {
        timer = setTimeout(function() {
            $("#stage1 td").removeClass("hover");
        }, 300);
    }
});
于 2012-07-04T03:31:54.850 回答
1

它似乎是先前答案的混合。

  • 使用 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout。

  • 其次，您可以使用包装器 div，这就是我的工作方式。如果您将鼠标悬停在子 div 上，那么您也将鼠标悬停在其父 div 上，而不管该父 div 在哪里。父 div 上的 mouseleave 事件不会触发，直到您不再将鼠标悬停在任何子上。

我尝试创建一个大小为零的包装 div，其中五个子 div 绝对定位成十字形，我相信它会按照您所说的方式工作。在 Firefox 和 Chrome 中测试。

$('.hoverme-wrapper').on('mouseenter mouseleave', function(e) {
  if (e.type === 'mouseenter') {
    if(!$("#stage1 td").hasClass("hover")) 
      $("#stage1 td").addClass("hover", 200)
  } else {
    $("#stage1 td").removeClass("hover", 200);
  }

[编辑以确认我已经针对 jQuery UI addClass 实现进行了测试]

于 2012-07-04T04:19:39.003 回答
0

使用mouseleave而不是mouseout.

于 2012-07-04T03:45:04.023 回答