zapobiec pseudo elementowi wywołując zawisanie?

Question

Jeśli mam markup:

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

gdzie klasa .a ma klasę najechania z nim związane

i .b klasa posiada element pseudo związanego z nim ... tak:

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

Czy jest możliwe, aby przy pomocy css element pseudowy wywoływał zawijanie klasy .a?

FIDDLE

Answer 1

Poniższy css załatwia sprawę dla nowoczesnych przeglądarek (not IE10-):

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

pointer-events: none pozwala elementy, aby nie otrzymywać aktywowania/kliknij wydarzenia.

Zobacz this fiddle.

---

Uwaga

pointer-events wsparcie dla elementów innych niż SVG jest w stosunkowo wczesnym etapie. developer.mozilla.org daje następujące ostrzeżenie:

Zastosowanie wskaźnika-wydarzeń w CSS dla elementów innych niż SVG eksperymentalny. Ta funkcja była częścią specyfikacji interfejsu użytkownika CSS3 UI , ale z powodu wielu otwartych problemów została przełożona na CSS4.

Model blokowy interpretacja Chrome od display: inline-block powoduje migotanie w the above fiddle.
Jeśli zamiast tego przejdziesz na display: block, otrzymasz prawidłową interpretację tego pola.
Firefox nie ma tego problemu.
Aby zapewnić jednolitą interpretację modelu box, użyć następujących:

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

View this fiddle w Chrome, aby zobaczyć efekt migotania.