Wie wird das aktuelle Element ausgewählt, um den Hover-Effekt anzuwenden? nicht geerbt

Question

Ich möchte genaues Element auswählen, um Hover-Effekt anzuwenden. Aber nicht geerbt.

<div class="parent"> 
    <div class="child"> <-- not here 
     <div class="parent"> 
      <div class="child"></div> <-- apply hover effect 
     </div> 
    </div> 
</div> 

ist es nur durch CSS möglich? Wenn es nicht nur durch CSS möglich ist, können Sie mir die Idee angularjs Direktive geben. Ziel ist es, eine wiederverwendbare, skalierbare Angularjs-Direktive oder CSS-Klasse zu erstellen.

Vielen Dank.

BEARBEITEN Klarere Struktur.

<div class="custom-scroller"> 
    <div class="custom-scrollbar"> <-- not here 
     <dynamic-multi-layer-elements> 
      ... <-- lots of dynamic number of elements here 
      <div class="custom-scroller"> <-- it might be many times nested 
       <div class="custom-scrollbar"></div> <-- apply hover effect 
      </div> 
      ... <-- lots of elements closed 
     </dynamic-multi-layer-elements> 
    </div> 
</div> 

Answer 1

Sie können es wie folgt tun:

.parent > .child > .parent > .child:hover 
{ 
    color: red; 
} 

Answer 2

.parent .parent > .child:hover 
{ 
color:green; 
} 

Sie es so, dass