0

是否可以在 :after 中使用 :not() 选择器/伪事物？

例如，如果我有以下内容：

li:hover > ul
{
    display: block;
}

li:after
{
    content: " ";
    width: 200px;
    height: 200px;
    background: #cccccc;
    position: absolute;
    top: -100px;
    left: -100px;
}

发生的情况是，如果一个人悬停在由 after 创建的内容上，它也会使子菜单显示块。换句话说，悬停其他 LI 或 AFTER 内容被确认为悬停 LI。我将如何阻止它，所以它只在悬停 ACTUAL LI 时才显示块，而不是使用 AFTER 创建的内容。

我想了想：li:hover:not(:after) > ul { display: none; }但没有奏效……

也试过了：li:after:hover > ul但也没有用。

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

4

2 回答 2

1

正如您所观察到的，:hover当将鼠标悬停在其内容（包括后代和伪元素）上时，将触发元素上的样式。但是，您不能阻止:hover元素上的样式应用于其:after伪元素，也不能:not()用于选择:after伪元素（规范明确禁止这样做）。

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

于 2012-06-30T16:46:07.830 回答
1

实际上，可以使用属性“pointer-events”并将其分配给伪元素 :after 或 :before 中的 none 。

所以它会是 -> 指针事件：无；在伪元素中。

于 2015-06-02T15:59:12.817 回答