क्लिक करने योग्य क्षेत्र पर ओवरले - सीएसएस

Question

क्या कोई तरीका है कि मैं आंशिक रूप से पारदर्शी छवि (या वास्तव में कुछ भी) एक्सएचटीएमएल और सीएसएस का उपयोग कर एक क्लिक करने योग्य क्षेत्र ओवरले कर सकता हूं?

Answer 1

@thirtydot आप एक समाधान कि केवल एक ही ब्राउज़र में काम करता है पता है मैं अभी भी यह यहां के लिए प्यार होता! हालांकि अधिक बेहतर समर्थन करते हैं।

आप pointer-events: none का उपयोग कर सकते हैं।

ब्राउज़र समर्थन: http://caniuse.com/pointer-events (IE10 को छोड़कर हर जगह काम करता है और पुराने)

http://jsfiddle.net/QC5Yw/

Answer 2

लपेटें ओवरले और एक क्लिक करने योग्य div में पृष्ठभूमि, और कुछ करने के लिए ओवरले की अपारदर्शिता विशेषता निर्धारित कम से कम 1.

http://www.w3schools.com/Css/css_image_transparency.asp

Answer 3

नहीं है, शीर्ष z- सूचकांक तत्व ध्यान केंद्रित करना होगा। लेकिन आप ओवरले परत पर एक और पारदर्शी शीर्ष परत बना सकते हैं, यह एक क्लिक करने योग्य होगा। तो:

z-index:1 Content element 
z-index:2 Mask/Overlay element 
z-index:3 Click element 

ऐसा इसलिए है क्योंकि ब्राउजर अंतर नहीं कर सकता कि आपका पीएनजी पारदर्शी कहां है। यह सिर्फ एक छवि के रूप में लेता है और इसमें पारदर्शी पिक्सेल होने पर फोकस नहीं पारित करेगा। Thats क्यों आप निश्चित और ऊंचाई के साथ एक पूरी तरह से खाली div डाल सकते हैं और यह क्लिक करने योग्य होगा।