Question

是否可以使用：not（）选择器/伪的东西：after？

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

li:hover > ul
{
    display: block;
}

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

如果一个人HOVERS超过之后创建的内容，也会使子菜单显示阻塞。换句话说，悬停其他LI或AFTER内容被确认为悬停在LI上。我如何阻止这一点，所以它只在悬停ACTUAL LI时显示阻止，而不是使用AFTER创建的内容。

我想过：li:hover:not(:after) > ul { display: none; }但是没有工作......

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

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

Answer 1

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

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

Answer 2

实际上可以使用属性＆＃34; pointer-events＆＃34;并在伪元素中将其分配给none：after或：before。

所以它会是 - ＆gt; pointer-events：none;在伪元素中。

CSS不是内容后的选择器

2 个答案: