如何防止绝对定位元素遮挡了div的hover样式？

Question

4

我有一个具有 background-color: blue; 的 div。当我悬停在上面时，它会变成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将保持蓝色，而不会采用它的红色hover样式，因为从技术上讲，我不再直接悬停在它上面了。

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

- R. Kohlisch

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- japrescott · Accepted Answer

您可以添加一些CSS，使您的绝对定位元素通过添加以下css变得 "透明" 以用于指针 (鼠标、触摸等)。但这也将忽略所有其他事件 (点击、鼠标悬停等)

.myAbsoluteDiv {
   pointer-events: none;
}

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

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