是否可以在 :after 中使用 :not() 选择器/伪类?
例如,如果我有以下内容:
li:hover > ul
{
display: block;
}
li:after
{
content: " ";
width: 200px;
height: 200px;
background: #cccccc;
position: absolute;
top: -100px;
left: -100px;
}
发生的情况是,如果有人将鼠标悬停在由之后创建的内容上,它也会使子菜单显示 block 。换句话说,悬停其他 LI 或 AFTER 内容被确认为悬停 LI。我该如何阻止它,所以它只会在悬停 ACTUAL LI 而不是使用 AFTER 创建的内容时显示 block 。
我想过:li:hover:not(:after) > ul { display: none; }
但没有成功...
也尝试过:li:after:hover > ul
但也没有用。
对此有什么想法吗?这可能看起来微不足道,但它会导致我的设计出现一些问题,因此需要尽快停止它。
最佳答案
如您所见,元素上的 :hover
样式将在悬停在其内容(包括后代元素和伪元素)上时触发。但是,您不能阻止元素上的 :hover
样式应用于其 :after
伪元素,也不能使用 :not()
选择 :after
伪元素(这被 spec 明确禁止)。
这是设计使然,因此唯一的解决方法是不使用 :after
,而是使用 JavaScript 生成一些其他元素,您可以将这些元素附加到 li
并取消 :hover
效果。
关于CSS 不是带有后内容的选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11275823/