एक छद्म तत्व को होवर ट्रिगर करने से रोकें?

Question

तो मेरे पास है मार्कअप:

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

जहां ए वर्ग के साथ जुड़े एक हॉवर वर्ग है यह

और .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; 
} 

क्या सीएसएस के साथ एक छद्म तत्व को .a क्लास होवर ट्रिगर करने से रोकने के लिए संभव है?

FIDDLE

Answer 1

निम्नलिखित सीएसएस आधुनिक ब्राउज़रों (not IE10-) के लिए काम कर देता है:

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

pointer-events: none तत्वों मंडराना/क्लिक करें घटनाओं प्राप्त नहीं कर सकते हैं।

this fiddle देखें। गैर एसवीजी तत्वों के लिए

---

सावधानी

pointer-events समर्थन एक रिश्तेदार जल्दी स्थिति में है।

गैर एसवीजी तत्वों के लिए सीएसएस में सूचक-घटनाओं के उपयोग प्रायोगिक है: developer.mozilla.org आप निम्नलिखित चेतावनी देता है। सुविधा यूआईआई यूआई ड्राफ्ट विनिर्देश का हिस्सा थी, लेकिन कई खुले मुद्दों के कारण, सीएसएस 4 पर स्थगित कर दिया गया है।

display: inline-block के लिए Chrome की बॉक्स मॉडल व्याख्या the above fiddle में एक झिलमिलाहट का कारण बनता है।
यदि आप इसके बजाय display: block पर स्विच करते हैं, तो आपको बॉक्स की उचित व्याख्या मिल जाएगी।
फ़ायरफ़ॉक्स में यह समस्या नहीं है।
सुनिश्चित करने के लिए लगातार बॉक्स मॉडल व्याख्या, का उपयोग करें: क्रोम में

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

देखें this fiddle झिलमिलाहट प्रभाव देखने के लिए।