防止伪元素触发悬停？

Question

如果我有标记:

<div class="a b"></div>

其中.a类有一个与之关联的悬停类

并且.b类有一个与之关联的伪元素......就像这样:

div
{
    width: 100px;
    height: 100px;
}
.a { background: red; display: inline-block; }
.a:hover { background: green; }

.b:after
{
    content: '';
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-left: 100px;
    background: pink;
}

是否可以使用css来阻止伪元素触发.a类悬停？

小提琴

Answer 1

以下css为现代浏览器(不是IE10-)提供了技巧:

.b:after {
  pointer-events: none;
}

pointer-events: none 允许元素不接收悬停/点击事件.

看到这个小提琴.

警告

pointer-events对非SVG元素的支持处于相对早期的状态.developer.mozilla.org为您提供以下警告:

在CSS中对非SVG元素使用指针事件是实验性的.该功能曾经是CSS3 UI草案规范的一部分,但由于许多未解决的问题,已被推迟到CSS4.

Chrome的盒子模型解释display: inline-block会导致上面的小提琴闪烁.
如果切换到display: block相反,您将获得对该框的正确解释.
Firefox没有这个问题.
要确保一致的箱型解释,请使用以下内容:

.b:after {
  pointer-events: none;
  display: block;
}

在Chrome中查看此小提琴以查看闪烁效果.