Nur Anwendung Hover-Effekte auf tiefste Wähler

Question

Ich habe mehrere divs als solche:

<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> 

Und ich versuche, einen Hover-Effekt nur auf das tiefste Element zu erreichen, wenn es die eine schwebte wird, ist. Derzeit wendet es den Effekt auch auf die übergeordneten Elemente an. Wie würde ich das vermeiden?

Answer 1

ich denke, es möglich mit Javascript wird

sehen: 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"); 
    }); 
    } 
}) 

Dieser Code wählt alle .hover-Effekt-Elemente, und für jeden von ihnen sehen, ob es ein Kind mit Klasse „Hover-Effekt“, wenn kein Es ist das tiefste Element ist, so dass wir eine MouseEnter- hinzufügen/Event verlassen

In CSS definieren wir eine Klasse „schwebte“, welcher Stil für onHover enthält:

.hovered{ 
    background-color:green; 
} 

Answer 2

war es Thema über tiefste Element here

Nach dieser Antwort, schrieb Gerald Fullman jQuery-Plugin .deepest aufgerufen, die, glaube ich, kann Ihnen helfen.

Ich kann es jetzt nicht testen, aber ich denke, es sein wird:

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

try stopPropagation, wegen der möglichen Probleme zu vermeiden. Lesen Sie mehr here

Answer 3

Sie :not() verwenden können, :has() Element auszuwählen, die als Kind-Knoten keinen bestimmten Wähler haben

$(".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>