防止僞元素觸發懸停？

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中看到閃爍的效果。