पॉइंटर-इवेंट्स प्रॉपर्टी के साथ सीएसएस में विशिष्ट तत्व पर होवर/माउसओवर ईवेंट को कैसे अनदेखा करें?

मैंने हाल ही में अपने एक क्लाइंट के लिए टीम गैलरी पेज बनाया है। प्रत्येक गैलरी आइटम को यूआई कार्ड द्वारा दर्शाया जाता है जो एक ओवरले का उपयोग करता है जो आपके माउस को उस पर ले जाने पर रंग बदलता है। लेकिन मैं एक समस्या में फंस गया, जिसने इस ट्यूटोरियल को प्रेरित किया।

UI कार्ड सामग्री और संरचना

प्रत्येक गैलरी कार्ड आइटम में ये तत्व होते हैं:

• कर्मचारी फोटो - काला/सफेद
• कर्मचारी का नाम - सफ़ेद
• कर्मचारी की भूमिका - सफेद
• एक सूक्ष्म डार्क बैकग्राउंड ओवरले

जब उपयोगकर्ता अपने माउस को प्रत्येक कार्ड पर ले जाते हैं तो बैकग्राउंड ओवरले हल्के अर्ध-पारदर्शी पीले (ब्रांड रंग) में बदल जाता है।

UI कार्ड उदाहरण

चूँकि मैं इस ट्यूटोरियल को एक विशिष्ट समस्या को हल करने पर केंद्रित रखना चाहता हूँ, यहाँ एक सरलीकृत है (डिज़ाइन-वार) UI कार्ड कैसा दिखता है इसका संस्करण। अपने माउस को उसके ऊपर ले जाने का प्रयास करें और देखें कि पृष्ठभूमि का रंग हल्का पीला हो गया है:

लेकिन एक समस्या है। हो सकता है कि आपने इसे पहले ही देख लिया हो। अपने माउस को टेक्स्ट क्षेत्र पर ले जाने का प्रयास करें, क्या आपको यह समस्या दिखाई दे रही है?

जैसे ही आपका माउस टेक्स्ट एलिमेंट क्षेत्र पर चलता है, होवर ईवेंट रद्द हो जाता है — और तुरंत पीले से, वापस डिफ़ॉल्ट निष्क्रिय अवस्था में, धूसर रंग के साथ बदल जाता है। स्वीकार्य नहीं है!

ये रहा एचटीएमएल कोड:

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
</div>

और सीएसएस:

.card {
  max-width: 350px;
  position: relative;
}

.card-overlay {
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.6s;
}

.card-overlay:hover {
  background-color: rgba(255, 204, 7, 0.5);
}

.card-image {
  max-width: 100%;
  display: block;
}

.card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.card-name,
.card-role {
  color: white;
  font-size: 1.5rem;
  line-height: 1.25;
  padding: 0.25rem;
}

.card-name {
  font-weight: bold;
}

तो जब आप अपने माउस को टेक्स्ट क्षेत्र पर ले जाते हैं तो होवर ईवेंट रद्द क्यों हो जाता है?

HTML के स्टैकिंग ऑर्डर के कारण। स्टैकिंग ऑर्डर को आमतौर पर CSS z-index . द्वारा नियंत्रित किया जाता है संपत्ति। हालांकि, एक डिफ़ॉल्ट स्टैकिंग ऑर्डर है ऐसा तब होता है, जब आप इसे पहले CSS से सीधे संबोधित नहीं करते हैं।

z-index एक स्टैक ऑर्डर . है सीएसएस संपत्ति। वह तत्व जिसमें उच्चतम z-index है मान (संख्या) को अन्य तत्वों के सामने रखा जाता है — उनकी position . मानकर मूल्य समान है। डिफ़ॉल्ट z-index वेब पेज पर सभी तत्वों का मान auto है , जो शून्य के समान है 0 ।

इसलिए चूंकि हमारे पास दो तत्व हैं जो दोनों पूर्ण स्थिति में हैं और उन दोनों में एक डिफ़ॉल्ट z-index है auto . का (0) स्टैकिंग क्रम में उनमें से कौन दूसरे के सामने है (एक को जीतना है)?

जो आपके HTML में सबसे अंत में आता है वही जीतता है।

इस मामले में, <div class="card-info"> कंटेनर जिसमें नाम और भूमिका टेक्स्ट तत्व होते हैं, card-overlay . के बाद आता है तत्व:

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
</div>

UI कार्ड उदाहरण पर, जैसे ही आप अपने माउस को टेक्स्ट तत्वों पर ले जाते हैं, आप अब ओवरले तत्व नहीं, बल्कि <class="card-info"> पर होवर कर रहे हैं तत्व, जिसमें :hover . नहीं है (छद्म वर्ग) संलग्न है। केवल .card वह है (सीएसएस कोड देखें)।

आप क्या कर सकते हैं?

यदि आप भौतिक रूप से <div class="card-overlay"></div> तत्व नीचे नीचे <div class="card-info>...</div> इस तरह के तत्व:

<div class="card">
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
  <div class="card-overlay"></div>
</div>

फिर स्टैकिंग ऑर्डर स्वैप हो जाएगा, और ऐसा होता है:

बढ़िया, अब जब आप अपने माउस को टेक्स्ट क्षेत्र पर ले जाते हैं तो ओवरले ट्रांज़िशन बाधित नहीं होता है (इसे आज़माएं)।

लेकिन रुकिए... अब जबकि स्टैकिंग क्रम को चारों ओर से बदल दिया गया है, टेक्स्ट तत्व ओवरले द्वारा धूसर हो जाते हैं, जो अब इसके सामने/ऊपर है।

हमने दूसरी समस्या बनाते समय एक समस्या का समाधान किया।

आइए नहीं उस दृष्टिकोण का उपयोग करें, और स्थानांतरित करें <div class="card-overlay"> तत्व अपनी मूल स्थिति में वापस आ जाता है।

क्या होगा यदि हम इसके बजाय .card-overlay . दें क्लास ए z-index 1 . का मान ?

अब card-overlay card-info . के सामने रखा जाएगा (जिसमें अभी भी z-index: 0 . है ) क्योंकि इसका स्टैक ऑर्डर अधिक है (z-index: 1 ) और अब होवर ईवेंट पर रंग परिवर्तन फिर से निर्बाध रूप से काम करेगा — जो बहुत अच्छा है, लेकिन...

दुर्भाग्य से, ऐसा करने से ठीक वैसा ही परिणाम मिलेगा जैसा पहले था जब हमने भौतिक रूप से <div class="card-overlay"> को स्थानांतरित किया था <div class="card-info"> . के नीचे तत्व तत्व। इस बार हमने सीधे सीएसएस के साथ स्टैकिंग ऑर्डर को बदल दिया है। टेक्स्ट तत्व अभी भी हैं ओवरले से धूसर हो गया।

यह अस्वीकार्य है!

बचाव के लिए सूचक ईवेंट!

मुझे अचानक याद आया कि CSS में pointer-events . नामक एक संपत्ति है जो आपको यह तय करने की अनुमति देता है कि किसी तत्व को प्रतिक्रिया चाहिए या नहीं सूचक घटनाओं के लिए।

सूचक घटनाएँ कुछ भी हैं जो आपको आपका माउस करना है, जैसे कि क्लिक करना, स्क्रॉल करना, या अपने माउस को किसी तत्व पर (होवर) करना।

तो मैंने बस pointer-events: none; . जोड़ा मेरे .card-info . पर वर्ग, उसकी तरह:

.card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  pointer-events: none; /* the fix! */
}

और अब आप होवर ईवेंट को रद्द किए बिना, टेक्स्ट सहित पूरे UI कार्ड पर होवर कर सकते हैं - और टेक्स्ट तत्व अपना 100% सफेद रंग बनाए रखते हैं:

कोडपेन देखें।