तत्व दिखाएं जब माउस जावास्क्रिप्ट के साथ इसमें प्रवेश करता है

मान लें कि आपके पास एक अदृश्य तत्व है (जैसे एक एक्शन बार/मेनू) जिसे आप दिखाना चाहते हैं जब उपयोगकर्ता का माउस उस क्षेत्र में प्रवेश करता है। हम ऐसा JavaScript माउसएंटर ईवेंट सेट करके कर सकते हैं।

इसे कैसे करें:

एचटीएमएल मार्कअप

अपने पसंदीदा संपादक में निम्नलिखित HTML कोड जोड़ें (ऑनलाइन के लिए मैं कोडपेन की सलाह देता हूं।

<div class="invisible-box">Yay you can see me!</div>

सीएसएस स्टाइलिंग

अपनी स्टाइलशीट में निम्नलिखित सीएसएस जोड़ें:

.invisible-box {
  opacity: 0;
  transition: all 500ms;
  padding: 32px;
  margin-top: 32px;
  margin-bottom: 32px;
  background-color: #cf4b32;
  color: #fff;
  text-align: center;
}

.opacity-1 {
  opacity: 1;
}

ध्यान दें कि .invisible-box कक्षा में opacity: 0; . है जिसका अर्थ है कि यह डिफ़ॉल्ट रूप से छिपा हुआ है। ठीक नीचे हमारे पास एक उपयोगिता वर्ग है .opacity-1 जिसका उपयोग हम जावास्क्रिप्ट के साथ तत्व को फिर से दिखाने के लिए करेंगे।

JavaScript माउसएंटर इवेंट

अपनी JS स्क्रिप्ट में निम्न कोड जोड़ें:

let invisibleBox = document.querySelector(".invisible-box")

function addFullOpacity() {
  invisibleBox.classList.add("opacity-1")
}

invisibleBox.addEventListener("mouseenter", addFullOpacity)

JavaScript कोड कैसे काम करता है

• सबसे पहले हम querySelector() का उपयोग करते हैं .invisible-box को खोजने और पकड़ने के लिए . फिर हम इसे एक उपयुक्त नाम वाले वेरिएबल को असाइन करते हैं:invisibleBox ।
• फिर हम एक फ़ंक्शन डिक्लेरेशन सेट करते हैं और इसे addFullOpacity() . का नाम दें . इसके शरीर के अंदर {..} हम एक कथन जोड़ते हैं ।
• बयान क्लासलिस्ट प्रॉपर्टी के add() . को अटैच करता है हमारे अदृश्य बॉक्स में विधि — और opacity-1 . जोड़ता है हमारे अदृश्य बॉक्स तत्व के लिए कक्षा।
• आखिरकार, हमने addEventListener() . की स्थापना की और इसे दो तर्क दें। पहला तर्क mouseenter के लिए सुनता है प्रतिस्पर्धा। दूसरा तर्क addFullOpacity() . को कॉल करना है फ़ंक्शन हमने ऊपर बनाया है (जैसे ही यह एक माउसेंटर ईवेंट पंजीकृत करता है)।

माउसएंटर बनाम माउसओवर?

आपने शायद गौर किया होगा कि माउसओवर . नामक एक ईवेंट प्रकार भी होता है — यह माउसएंटर? . से किस प्रकार भिन्न है?

मुख्य अंतर यह है कि:

• द माउसओवर जब भी उपयोगकर्ता का माउस पैरेंट एलीमेंट या उसके चाइल्ड एलिमेंट पर जाता है, तो ईवेंट ट्रिगर हो जाता है। यदि आप पीछे और चौथे तत्व - जो महंगा हो सकता है, प्रदर्शन-वार हो सकता है, तो यह ट्रिगर करता रहता है।
• माउसएंटर इवेंट सिर्फ़ को ट्रिगर करता है जब माउस लक्ष्य मूल तत्व में प्रवेश करता है - यह अपने बच्चों की परवाह नहीं करता है। :-(

आप माउसओवर . का उपयोग करना चाहेंगे यदि आपके पास एक वेब घटक है जिसमें विभिन्न विशेषताएं हैं जिन्हें आप उपयोगकर्ताओं के साथ इंटरैक्ट करते समय अलग तरह से व्यवहार करना चाहते हैं। अन्यथा माउसेंटर से चिपके रहें क्योंकि यह प्रदर्शन के लिए बेहतर है।

संसाधन

• कोडपेन सभी कोड के साथ।
• एमडीएन वेब डॉक्स माउसएंटर