CSS 不是带有后内容的选择器

Question

是否可以在 :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 但也没有用。

对此有什么想法吗？这可能看起来微不足道，但它会导致我的设计出现一些问题，因此需要尽快停止它。

Answer 1

如您所见，元素上的 :hover 样式将在悬停在其内容(包括后代元素和伪元素)上时触发。但是，您不能阻止元素上的 :hover 样式应用于其 :after 伪元素，也不能使用 :not() 选择 :after 伪元素(这被 spec 明确禁止)。

这是设计使然，因此唯一的解决方法是不使用 :after，而是使用 JavaScript 生成一些其他元素，您可以将这些元素附加到 li并取消 :hover 效果。