Question

我有多个div：

<div class="hover-effect">
   <div class="hover-effect">
      <div class="hover-effect">
         <div class="hover-effect"></div>
      </div>
   </div>
</div>
<div class="hover-effect">
    <div class="hover-effect"></div>
</div>
<div class="hover-effect"></div>
<div class="hover-effect"></div>

我试图仅在最深的元素上实现悬停效果，如果它是被徘徊的那个。目前它还将效果应用于父元素。如何避免这种情况？

Answer 1

我认为可以使用Javascript

请参阅：https://jsfiddle.net/eszujrwm/

$(".hover-effect").each(function(){
    if( $(this).find(".hover-effect").length == 0 ){
        $(this).mouseenter(function() {
        $(this).addClass("hovered");
    }).mouseleave(function() {
         $(this).removeClass("hovered");
    });
    }
})

此代码选择所有.hover-effect元素，并且每个元素都会看到它是否有一个具有“hover-effect”类的子元素如果没有它是最深的元素所以我们添加了一个mouseenter / leave事件

在CSS中，我们定义了一个“hovered”类，其中包含onhover的样式：

.hovered{
    background-color:green;
}

Answer 2

有关于最深元素here

的主题

根据这个答案，Gerald Fullman编写了名为.deepest的jQuery插件，我认为可以帮助你。

我现在无法测试它，但我认为它会像：

$(dokument).ready(function() {
  $('.hover-effect').mouseover(function() {
    $(this).deepest('.hover-effect'); // ...
  });
});

尽量避免使用stopPropagation，因为潜在的问题。阅读更多here

Answer 3

您可以使用:not()，:has()选择没有特定选择器的元素作为子节点

$(".hover-effect:not(:has(.hover-effect))")
.hover(function() {
  $(this).toggleClass("deepest")
});

.deepest {
  background:purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover-effect">
  not deepest
   <div class="hover-effect">
     not deepest
      <div class="hover-effect">
        not deepest
         <div class="hover-effect">deepest</div>
      </div>
   </div>
</div>
<div class="hover-effect">
  not deepest
    <div class="hover-effect">deepest</div>
</div>
<div class="hover-effect">deepest</div>
<div class="hover-effect">deepest</div>

仅将悬停效果应用于最深的选择器

3 个答案: