सीएसएस बनाएं: होवर केवल मूल तत्व को प्रभावित करता है

Question

सीएसएस में, मैं :hover ईवेंट को मूल तत्व में ट्रिगर होने पर कैसे रोक सकता हूं, जब कोई बच्चा ईवेंट आच्छादित हो जाता है, ताकि जब माता-पिता स्वयं ही हो जाए तो यह केवल ट्रिगर हो जाए? इस मामले में मेरा बच्चा तत्व वास्तव में पूर्ण स्थिति के साथ अपने मूल तत्व के बाहर स्थित होता है, इसलिए जब बच्चा आ जाता है तो माता-पिता बदलते समय थोड़ा अजीब होता है।

मैंने समस्या का वर्णन करने के लिए JSFiddle बनाया।

यहां मेरे उदाहरण के लिए उपयोग किए गए समाधान के JSFiddle है।

Answer 1

वहाँ एक शुद्ध सीएसएस समाधान (यहां तक ​​कि दो वास्तव में) है, लेकिन दोनों लागत से आते हैं।

1. आप पॉइंटर-ईवेंट जोड़ सकते हैं: कोई नहीं; आपके बच्चे के तत्व के लिए - लेकिन यह अपनी खुद की होवर शैलियों का जवाब नहीं देगा। Pointer-events दुर्भाग्य से संस्करण 11 (http://caniuse.com/#search=pointer-events) के नीचे आईई में समर्थित नहीं हैं।

2. किसी अन्य व्यक्ति (इस विधि की लागत) में अपने मूल तत्व (स्थानित बच्चे के अलावा) की सामग्री लपेटें और इस रैपर में होवर शैलियों को लागू करें।

दोनों विधियों के उदाहरण here।

.parent-2, 
.parent { position:relative; background:#ddd; width:100px; height:100px; } 
.parent:hover { background:blue; } 
.child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; } 
/* doesn't work in opera and ie */ 


.content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;} 
.content:hover { background:blue; } 

Answer 2

बस: अपने #innerdiv को घोंसला न करें। लिटिल डेमो: little link। ध्यान दें कि मैंने जोड़ा:

html, body { 
    position: relative; 
} 

इस मामले में आवश्यक है।

संपादित करें: यदि आप इसे नेस्टेड करने का आग्रह करते हैं, तो जावास्क्रिप्ट का एक बिट आवश्यक है। यहां एक नमूना है:

var inn = document.getElementById("inner"), outt = document.getElementById("holder"); 
outt.onmouseover = function() { 
    this.style.backgroundColor = "rgb(0, 162, 232)"; /*I like this color :)*/ 
} 
outt.onmouseout = function() { 
    this.style.backgroundColor = "orange"; 
} 
inn.onmouseover = function(ev) { 
    ev.stopPropagation(); 
} 

(यह jQuery के उपयोग से लिखा गया छोटा होगा, लेकिन विचार समान है)।

यहां एक डेमो है: little link।

Answer 3

आपको बुलबुले से ईवेंट को रोकने के लिए थोड़ा सा जावास्क्रिप्ट उपयोग करने की आवश्यकता है। इस उदाहरण पर एक नज़र डालें:

css :hover only affect top div of nest