防止 div 顶部的绝对定位元素阻止 div 的悬停样式？

Question

我有一个div具有background-color: blue;。现在，当我悬停时，它变为red; 我还有一个绝对定位的元素，它（视觉上）在那个 div 的顶部，语义上是一个兄弟元素。

<div>
<div>My blue div</div>
<div>My absolutely positioned element, which is actually on top of my blue div</div>
</div>

现在，当我将鼠标悬停在绝对定位的元素上时，我的蓝色 div 将保持蓝色，并且不会采用其红色悬停样式，因为从技术上讲，我不再直接悬停在它上面。

我有什么办法可以防止这种情况？

Answer 1

您可以添加一些 CSS，通过添加以下 css使您的绝对定位元素对于您的指针（鼠标、触摸等）是“透明的”。但这也会忽略所有其他事件（点击、鼠标悬停等）

.myAbsoluteDiv {
   pointer-events: none;
}

如果您仍然想附加事件等，您可以使用以下更广泛的 css

.blueDiv{
    backgroundColor: blue;
}
.outsideDiv:hover .blueDiv {
   backgroundColor: red;
}