ओवरलैपिंग div "क्लिक करने योग्य नहीं" बनाओ ताकि नीचे दी गई सामग्री तक पहुंचा जा सके?

Question

मैं एक प्रभाव के लिए कम अस्पष्टता के साथ एक जेपीजी ओवरले का उपयोग कर रहा हूं, हालांकि मैं इसे केवल एक प्रभाव के रूप में चाहता हूं और उस div के नीचे सामग्री को क्लिक करने योग्य बनाता हूं। क्या यह संभव है, धन्यवाद :))

आपकी टिप्पणियों के लिए धन्यवाद। मुझे लगता है कि मुझे कुछ और सोचना होगा क्योंकि जेपीईजी पूरे पृष्ठ को कवर करता है :)

Answer 1

वैसे pointer-events:none; है लेकिन केवल कुछ ब्राउज़र आधुनिक ब्राउज़र (और IE11) इसका समर्थन करते हैं।

https://developer.mozilla.org/en/CSS/pointer-events

Answer 2

नहीं, ऐसा नहीं है। ओवरलेइंग तत्व हमेशा क्लिक को रोक देगा। एक संभावित कामकाज click ईवेंट को ओवरलेइंग तत्व में बांधना है, और उसके बाद वर्तमान माउस स्थिति & यह निर्धारित करने के लिए कि तत्व को एक क्लिक पंजीकृत करना है या नहीं, यह निर्धारित करने के लिए नीचे तत्व की स्थिति की तुलना करें। लेकिन संभावना है कि इसे पूरा करने का एक बेहतर तरीका है। हालांकि, आपका कोड देखे बिना, मुझे जानने का कोई तरीका नहीं है।

Answer 3

हाँ, यह संभव है

उपयोग pointer-events: none IE11 के लिए सीएसएस के सशर्त बयान (यह IE10 या नीचे में काम नहीं करता के रूप में) के साथ-साथ, आप एक क्रॉस ब्राउज़र संगत समाधान इस लक्ष्य को हासिल करने के लिए प्राप्त कर सकते हैं ।

AlphaImageLoader का उपयोग करके, आप ओवरले div में पारदर्शी .PNG/.GIF एस भी डाल सकते हैं और क्लिकों को झुकाव वाले तत्वों के माध्यम से प्रसारित कर सकते हैं।

सीएसएस:

pointer-events: none; 
background: url('your_transparent.png'); 

IE11 सशर्त:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale'); 
background: none !important; 

यहाँ सब कोड के साथ एक basic example page है।

Answer 4

एक साधारण चाल जो मैंने पाया है, बहुत w3c नहीं है, div को एक अवधि में समाहित करना है और ओवरले बनाने के लिए उस अवधि वर्ग का उपयोग करना है। इस तरह पूरी चीज क्लिक करने योग्य होगी, और div एक div