सीएसएस - होवर कवर तत्व पर होवर को सक्रिय करने के लिए तत्वों के माध्यम से गुजरता है

Question

मेरे पास एक पृष्ठ लेआउट है जिसमें बहुत सारी स्थिति पूर्ण और जेड-इंडेक्सिंग शामिल है, इसलिए ऐसे कई तत्व हैं जो एक दूसरे को ओवरलैप कर रहे हैं।

तत्वों में से एक में केवल टेक्स्ट होता है और यह कई अन्य चीजों के शीर्ष पर हो जाता है।

उस तत्व के नीचे ऐसे कई तत्व हैं जिनमें सीएसएस होवर छद्म वर्ग लागू होते हैं।

जब माउस टेक्स्ट युक्त तत्व से गुज़रता है, तो मैं माउस की उपस्थिति का जवाब देने और छद्म वर्ग शैलियों को सक्रिय करने के लिए नीचे किसी तत्व के लिए तत्व चाहता हूं।

क्या कोई तत्व शैली बनाने का कोई तरीका है, इसलिए यह होवर को इसके नीचे किसी भी तत्व से गुज़रने की अनुमति देता है?

यह जावास्क्रिप्ट के साथ बहुत कठिन नहीं होगा, लेकिन मैं इस समय उस मार्ग को उतना आसान नहीं रखूंगा जितना कि वे हो सकते हैं। मैं बाद में जावास्क्रिप्ट के साथ चीजों को जटिल बना दूंगा।

धन्यवाद

पीएस - मैं पहले से ही एचटीएमएल 5 और CSS3 का उपयोग कर रहा हूं, इसलिए इन नए मानकों का उपयोग करने वाले समाधानों के साथ मुझे कोई समस्या नहीं होगी।

Answer 1

आप शीर्ष पर तत्व को pointer-events: none; उपयोग कर सकते हैं:

, http://jsfiddle.net/7aeDt/

जैसा कि आप देख सकते हैं जब आप शीर्ष तत्व के पीछे सक्रिय है पर तत्व होवर करें। https://developer.mozilla.org/en/CSS/pointer-events

उदाहरण:

<div> on top of all: hover me </div> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 

सीएसएस

div { 
    width : 200px; 
    height : 200px; 
    float : left; 
    cursor : pointer; 
    border : 1px green solid; 
} 

div + div:hover { background: #a1a6c8; } 

div:first-child { 
    pointer-events : none; 
    position  : absolute; 
    top   : 100px; 
    left   : 100px; 
    border   : 1px green solid; 
    background  : #c1c6c8; 
} 

Answer 2

इसके अलावा, कुछ ऐसा है जो लोगों को उपयोगी पा सकते हैं कि आप कर सकते हैं बच्चे पर सूचक घटनाओं को फिर से सक्षम है इस संपत्ति के बारे में अधिक जानकारी के लिए पॉइंटर-इवेंट्स के तत्व: पॉइंटर-इवेंट्स पर सेट करके कोई तत्व नहीं: ऑटो स्पष्ट रूप से। यह अच्छी तरह से प्रलेखित प्रतीत नहीं होता है और यह बहुत उपयोगी साबित होता है। - slicedtoad

@ slicedtoad की टिप्पणी मेरे लिए बेहद उपयोगी थी, इसलिए मुझे लगता है कि यह एक पूर्ण उत्तर के योग्य है। यदि आप माता-पिता को pointer-events: none सेट करते हैं, तो आप इसके बच्चों के लिए ईवेंट अक्षम कर देंगे। हालांकि, अगर आप बच्चों को point-events: auto सेट करते हैं, तो वे फिर से काम करेंगे।

यह तब भी काम करता है जब बच्चों के पास नकारात्मक z-index होता है, और इसलिए सूचक-घटनाओं के लिए उत्तरदायी नहीं होते हैं।