JavaScript से माउस एंटर करने पर एलिमेंट दिखाएं

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

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

HTML मार्कअप

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

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

CSS स्टाइलिंग

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

.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 से एलिमेंट को फिर से दिखाने के लिए करेंगे।

JavaScript mouseenter इवेंट

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

let invisibleBox = document.querySelector(".invisible-box") 
function addFullOpacity() { 
  invisibleBox.classList.add("opacity-1") 
} 
invisibleBox.addEventListener("mouseenter", addFullOpacity)

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

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

mouseenter बनाम mouseover?

आपने शायद देखा होगा कि mouseover नामक एक इवेंट टाइप भी है — यह mouseenter से कैसे भिन्न है?

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

• mouseover इवेंट हर बार ट्रिगर होता है जब यूजर का माउस पैरेंट एलिमेंट या उसके चाइल्ड एलिमेंट्स में से किसी पर भी मूव करता है। यदि आप एलिमेंट्स के बीच आगे-पीछे मूव करते रहते हैं तो यह ट्रिगर होता रहता है — जो परफॉरमेंस के लिहाज से महंगा हो सकता है।
• mouseenter इवेंट केवल तब ट्रिगर होता है जब माउस टार्गेट पैरेंट एलिमेंट में प्रवेश करता है — यह इसके बच्चों की परवाह नहीं करता। :-(

आप mouseover का उपयोग करना चाहेंगे यदि आपके पास एक वेब कंपोनेंट है जिसमें विभिन्न फीचर्स हैं जिन्हें आप चाहते हैं कि वे यूजर्स के साथ इंटरैक्ट करते समय अलग व्यवहार करें। अन्यथा mouseenter पर टिके रहें क्योंकि यह परफॉरमेंस के लिए बेहतर है।

संसाधन

• सभी कोड के साथ CodePen।
• MDN Web Docs mouseenter