如何防止伪元素触发悬停效果？

Question

如果我有这样的标记：

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

其中 .a 类与 hover 类相关联

而 .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类的悬停效果？

FIDDLE

- Danield

---

你能提供一下你的期望和现有情况的简要概述吗？ - Nitesh

据我所知，这是不可能的，因为伪元素是真实元素的子元素。 - powerbuoy

能否使用 not 选择器帮助解决问题？ - Danield

Answer 1

下面的CSS代码可以在现代浏览器(IE10以下版本除外)中实现此效果：

The following css does the trick for modern browsers (not IE10-):

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

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

请参见此示例。

---

注意事项

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

CSS中使用pointer-events来控制非SVG元素是实验性的。该功能曾经是CSS3 UI草案规范的一部分，但由于存在许多问题，已推迟到CSS4。

Chrome对display: inline-block的框模型解释会导致上述示例出现闪烁问题。
如果改为使用display: block，则可以获得正确的框模型解释。
Firefox不存在此问题。
为确保一致的框模型解释，请使用以下内容：

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

在Chrome中查看这个示例，以查看闪烁效果。

- tessi

---

嗯，那是个好主意，但我看到了闪烁... 有什么想法吗？ - Danield

哦，我看不到任何闪烁。你使用的是哪个浏览器/操作系统？ - tessi

我正在使用Windows7上的Chrome。 - Danield

@Danield 在我的回答中添加了一个关于生产环境使用的警告。 - tessi

在Chrome 42.0.2311.152中，如果你将鼠标悬停在禁用的.b底部边缘，它仍然会触发悬停效果。:( - notacouch