如何将鼠标悬停在多个元素上，但只影响CSS中的一个元素

Question

我有.tabCapture:hover，它自我运行良好，当我将鼠标悬停在上面时，它会放一个阴影。

我的问题是，在.tabCapture元素上，我还有其他元素，例如：tabFooter，tabIcon和tabDescription，当鼠标滑过那些阴影时，框阴影消失了

我想知道即使鼠标悬停在tabFooter，tabIcon和tabDescription上我也能拥有盒子阴影吗？

Answer 1

您提到在父“ .tabCapture” div上存在其他几个div。因此，当子div上发生click事件时，父div不会接收到悬停/鼠标事件，因此不会触发悬停选择器。为避免这种情况，您必须忽略子div上的鼠标事件，并将它们传递给父div。可以通过将属性pointer-events:none添加到子div的CSS来完成。

Answer 2

在您的情况下，.tabOuter:hover仅使用层次结构中较高的选择器即可。