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

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)

            }
        });

这个 Action 有办法吗？

编辑:忘记提及 div 的形状不仅仅是纯粹的正方形。它由几个正方形组成，但最终的形状相当奇怪。所以我不能用另一个父 div 来包装我的 div。

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

Answer 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 实现进行了测试]