将鼠标悬停在最高的 z 索引重叠 div 上

Question

在下面的示例中，我知道如果我将鼠标悬停在具有z-index:3的div上，那么从技术上讲，我也将鼠标悬停在它下面的上，因此我悬停的div及其所有父级都受到hover

但是，我怎样才能实现将鼠标悬停在div 上仅影响该特定div而不会影响其重叠的结果呢？

.dragger:hover{
background-color:orange;
}

<div>
<div class="dragger" draggable="true" style="z-index:1;">
home
<div class="dragger" draggable="true" style="z-index:2;">
home-1
<div class="dragger" draggable="true" style="z-index:3;">home-1-1</div>
<div class="dragger" draggable="true" style="z-index:3;">home-1-2</div>
<div class="dragger" draggable="true" style="z-index:3;">home-1-3</div>
</div>
<div class="dragger" draggable="true" style="z-index:2;">
home-2
<div class="dragger" draggable="true" style="z-index:3;">home-2-1</div>
<div class="dragger" draggable="true" style="z-index:3;">home-2-2</div>
</div>
</div>
<div class="dragger" draggable="true" style="z-index:1;">
other
</div>
</div>

Answer 1

尝试在您想要效果的div 上分配不同的类。现在它们都有相同的类，因此它们都会受到悬停效果的影响。