css - prevent a pseudo element from triggering hover? -

if have markup:

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

where .a class has hover class associated it

and .b class has pseudo element associated it... so:

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

is possible css prevent pseudo element triggering .a class hover?

fiddle

the following css trick modern browsers (not ie10-):

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

pointer-events: none allows elements not receive hover/click events.

see this fiddle.

---

caution

pointer-events support non-svg elements in relative state. developer.mozilla.org gives following warning:

the use of pointer-events in css non-svg elements experimental. feature used part of css3 ui draft specification but, due many open issues, has been postponed css4.

chrome's box model interpretation of display: inline-block causes flicker in the above fiddle.
if switch display: block instead, proper interpretation of box.
firefox not have issue.
ensure consistent box model interpretation, use following:

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

view this fiddle in chrome see flicker effect.