Question

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

<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因此我可以使用第二个参数addclass和removeclass

Answer 1

试试这个：live()已弃用，您可以使用on()方法：

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

http://jsfiddle.net/jUmTt/

Answer 2

你的意思是，只要他们悬停在任何元素上，他们都会收到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。在语义上这更有意义;仅仅因为标记中的元素彼此接近并不意味着它们应该被视为一个大元素。

Answer 3

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

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);
    }
});

Answer 4

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

使用mouseenter和mouseleave代替鼠标悬停和mouseout。
其次，你可以使用包装器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实现进行了测试]

Answer 5

使用mouseleave代替mouseout。

悬停多个仅影响1个项目的元素

5 个答案: