माउसओवर () और होवर () फ़ंक्शन का चयन कब करें?


112

JQuery .mouseover()और .hover()कार्यों के बीच अंतर क्या हैं ? यदि वे पूरी तरह से समान हैं तो jQuery दोनों का उपयोग क्यों करता है?


4
यह डुप्लिकेट प्रश्न नहीं है। आपके दिए गए लिंक में माउसओवर और माउसेंटर इवेंट्स हैं, लेकिन मेरा माउसओवर और हॉवर इवेंट्स हैं।
भोजेंद्र रौनियार

1
वे माउसओवर नाड मूसलीव के समान हैं और नीचे दिया गया उत्तर सटीक नहीं है ... होवर फ़ंक्शन माउसओवर और माउसलेव इवेंट को जोड़ता है न कि माउसओवर और माउसआउट इवेंट
अरुण पी जॉनी

1
देख jsfiddle.net/arunpjohny/cZb5b/1 से माउस को स्थानांतरित elकरने के लिए तत्व childऔर सांत्वना जाँच
अरुण पी जॉनी

@ArunPJohny कृपया पुनः पढ़ें, यह कह रहा है कि माउसओवर और माउससेलव को माउसओवर और माउसआउट न करें।
भोजेंद्र रौनियार

1
होवर के साथ भी - jsfiddle.net/arunpjohny/cZb5b/2 यदि आप कंसोल का विश्लेषण कर सकते हैं, तो आप अंतर पा सकते हैं ...
अरुण पी जॉनी

जवाबों:


113

आधिकारिक jQuery प्रलेखन से

  • .mouseover()
    एक ईवेंट हैंडलर को "माउसओवर" जावास्क्रिप्ट ईवेंट में बांधें, या उस ईवेंट को किसी तत्व पर ट्रिगर करें।

  • .hover() मिलान किए गए तत्वों में से एक या दो हैंडलर को बांधें, जब माउस पॉइंटर प्रवेश करता है और तत्वों को छोड़ देता है।

    कॉलिंग के $(selector).hover(handlerIn, handlerOut)लिए आशुलिपि है: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);


  • .mouseenter()

    जब माउस किसी तत्व में प्रवेश करता है, या उस तत्व पर उस हैंडलर को ट्रिगर करता है, तो एक घटना हैंडलर को बांधें।

    mouseoverआग जब पॉइंटर को बाल तत्व में ले जाती है, तब भी mouseenterफायर करती है , जब पॉइंटर को बाध्य तत्व में ले जाता है।


इसका क्या मतलब है

इस वजह से, .mouseover()है नहीं के रूप में ही .hover()के लिए एक ही कारण .mouseover()है नहीं के रूप में ही .mouseenter()

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function) 

31

.hover()फ़ंक्शन दो फ़ंक्शन तर्कों को स्वीकार करता है, एक mouseenterघटना के लिए और एक mouseleaveघटना के लिए।


प्रश्न शीर्षक में उल्लिखित दो कार्यों के बीच अंतर के संदर्भ में यह एक महान बिंदु है, धन्यवाद! नीचे दिए गए लिंक को w3schools पर देखें कि कैसे .hover () काम करता है: w3schools.com/jquery/event_hover.asp
Bahman.A

8

आप इसे jQuery डॉक पेज पर http://api.jquery.com/mouseover/ से आज़मा सकते हैं । यह एक अच्छा सा, इंटरैक्टिव डेमो है जो इसे बहुत स्पष्ट बनाता है और आप वास्तव में अपने लिए देख सकते हैं।

संक्षेप में, आप देखेंगे कि एक माउस ओवर इवेंट तब होता है जब आप उस पर होते हैं - या तो उसके बच्चे या माता-पिता तत्व से आ रहे हैं, लेकिन एक माउस एंटर इवेंट तभी होता है जब माउस मूल तत्व से तत्व की ओर बढ़ता है।


1

ऑफिकल डॉक्स से: ( http://api.jquery.com/hover/ )

.होवर () विधि माउसलर और मूसलीव दोनों घटनाओं के लिए हैंडलर को बांधती है। जिस समय माउस तत्व के भीतर होता है उस समय आप किसी तत्व के लिए व्यवहार को लागू करने के लिए इसका उपयोग कर सकते हैं।


1

जैसा कि आप http://api.jquery.com/mouseenter/ पर पढ़ सकते हैं

माउस एक्सप्लोरर जावास्क्रिप्ट घटना इंटरनेट एक्सप्लोरर के लिए स्वामित्व है। ईवेंट की सामान्य उपयोगिता के कारण, jQuery इस ईवेंट का अनुकरण करता है ताकि इसे ब्राउज़र की परवाह किए बिना उपयोग किया जा सके। यह घटना एक तत्व को भेजी जाती है जब माउस पॉइंटर तत्व में प्रवेश करता है। कोई भी HTML तत्व इस घटना को प्राप्त कर सकता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.