css - 防止伪元素触发悬停？

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导致上面的 fiddle闪烁。
如果改为display: block改为，您将获得对该框的正确解释。
Firefox 没有这个问题。
为确保一致的盒模型解释，请使用以下内容：

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

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