擬似要素がホバーをトリガーしないようにしますか？

Question

私はマークアップしている場合：

.Aクラスはそれ

に関連したホバークラスを持っていると.Bクラスは、それに関連付けられた擬似要素を持っている...ので、同じよう

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

：

を

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; 
} 

擬似要素が.aクラスホバーをトリガーしないようにすることは可能ですか？

FIDDLE

Answer 1

次のCSSは、最近のブラウザ(not IE10-)のためのトリックを行います。

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

pointer-events: noneは要素がホバー/クリックイベントを受信しないことができます。

this fiddleを参照してください。非SVG要素の

---

注意

pointer-events支持相対初期状態です。非SVG要素のCSSでのポインタのイベントの使用が 実験で

：developer.mozilla.orgはあなたに次の警告を与えます。この機能はCSS3 UI草稿 仕様に含まれていましたが、未解決の問題が多数あるため、 CSS4に延期されました。 display: inline-blockの

Chromeのボックスモデルの解釈はthe above fiddleでちらつきの原因となります。
代わりにdisplay: blockに切り替えると、適切な解釈が得られます。
Firefoxにこの問題はありません。フリッカー効果を見るためにChromeで

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

ビューthis fiddle：
は、一貫性のあるボックスモデルの解釈を確保するために、次を使用します。