, sahte bir öğenin hover'ı tetiklemesini önler mi?

Question

ben varsa işaretleme:

.a sınıfı ile ilişkili bir vurgulu sınıfı vardır

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

o

ve .b sınıfı şöyle ... kendisiyle ilişkilendirilmiş bir sözde elemanı vardır:

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 ile, sahte bir öğenin .a sınıfı gezinmesini tetiklemesini önlemek mümkün mü?

FIDDLE

Answer 1

aşağıdaki css modern tarayıcılarda (not IE10-) için hile yapar:

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

pointer-events: none elemanları vurgulu/tıklama olayları almaz sağlar.

Bkz. this fiddle. olmayan SVG elemanları

---

Dikkat

pointer-events destek göreli erken durumda.

olmayan SVG öğeleri için CSS'deki işaretçi-olayların kullanımı deneysel geçerli: developer.mozilla.org size şu uyarı verir. Özellik, CSS3 UI taslağının bir parçası olarak belirtiminin bir parçasıydı, ancak birçok açık sorun nedeniyle, CSS4'e ertelendi.

display: inline-block Chrome'un kutu modeli yorumlama the above fiddle bir titreşimi neden.
Bunun yerine display: block geçiş yaparsanız, kutunun doğru yorumunu alırsınız.
Firefox bu sorun yok. titreme etkisini görmek için Chrome'da

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

Görünüm this fiddle:
tutarlı kutu modeli yorumlanmasını sağlamak için aşağıdakileri kullanın.