防止伪元素触发悬停？

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类悬停？

FIDDLE

Answer 1

以下CSS的伎俩现代浏览器(not IE10-)：

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

pointer-events: none允许元素没有收到悬停/单击事件。

请参阅this fiddle。

---

注意非SVG元素

pointer-events支撑件处于相对早的状态。 developer.mozilla.org为您提供了以下警告：

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

的display: inline-block Chrome的盒模型解释导致the above fiddle闪烁。
如果您切换到display: block，您将得到正确的解释框。
Firefox没有这个问题。
为了确保一致的盒模型的解释，使用以下命令：

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

查看this fiddle在Chrome中看到闪烁的效果。