पता लगाएँ कि क्या jQuery के साथ तत्व पर मँडरा रहा है

Question

होवर करते समय कॉल करने के लिए मैं कोई एक्शन नहीं ढूंढ रहा हूं , बल्कि यह बताने का एक तरीका है कि क्या कोई तत्व वर्तमान में होवर किया जा रहा है। उदाहरण के लिए:

$('#elem').mouseIsOver(); // returns true or false

क्या कोई jQuery विधि है जो इसे पूरा करती है?

Comments

बस किसी को अन्य समाधान stackoverflow.com/questions/1273566/… के

— जो ई।

नकल के रूप में अंकन काफी गलत दिखता है। प्रश्न यह नहीं कहता है कि आशय क्या है, किसी और के लिए ओपी के दिमाग को पढ़ना और यह तय करना कि यह टकराव का पता लगाने वाला प्रश्न है और नकल के रूप में चिह्नित है।

— मेलिगी

Answer 1

मूल (और सही) उत्तर:

आप is()चयनकर्ता के लिए उपयोग और जांच कर सकते हैं :hover।

var isHovered = $('#elem').is(":hover"); // returns true or false

उदाहरण: http://jsfiddle.net/Meligy/2kyaJ/3/

(यह तभी काम करता है जब चयनकर्ता एक तत्व अधिकतम से मेल खाता है। अधिक के लिए संपादन 3 देखें)

।

1 संपादित करें (29 जून 2013): (केवल 1.10+ के साथ काम करने पर 1.9.x पर लागू होता है, इसे संपादित करें देखें)

यह उत्तर उस समय सबसे अच्छा समाधान था जब प्रश्न का उत्तर दिया गया था। यह ': hover' चयनकर्ता .hover()jQuery 1.9.x में विधि हटाने के साथ हटा दिया गया था।

दिलचस्प रूप से "एलिकार्नर" द्वारा हाल ही में दिए गए उत्तर से पता चलता है :hoverकि सीएसएस चयनकर्ता (बनाम सिज़ल) के रूप में इसका उपयोग करना संभव है जब आप इसे चयनकर्ता के साथ जोड़ते हैं $($(this).selector + ":hover").length > 0, और यह काम करने लगता है!

इसके अलावा, एक अन्य उत्तर में उल्लिखित hoverIntent प्लगइन बहुत अच्छा लगता है।

संपादित 2 (21 सितंबर, 2013): .is(":hover") काम करता है

एक अन्य टिप्पणी के आधार पर मैंने देखा है कि मैंने जिस मूल तरीके से पोस्ट किया था .is(":hover"), वास्तव में अभी भी jQuery में काम करता है, इसलिए।

1. इसने jQuery 1.7.x में काम किया।

2. 1.9.1 में काम करना बंद कर दिया, जब किसी ने मुझे इसकी सूचना दी, और हम सभी ने सोचा कि यह hoverउस संस्करण में इवेंट हैंडलिंग के लिए उपनाम हटाने के लिए jQuery से संबंधित है ।

3. इसने फिर से jQuery 1.10.1 और 2.0.2 (शायद 2.0.x) में काम किया, जो बताता है कि 1.9.x में विफलता एक बग थी या इसलिए एक जानबूझकर व्यवहार नहीं था जैसा कि हमने पिछले बिंदु में सोचा था।

यदि आप एक विशेष jQuery संस्करण में यह परीक्षण करना चाहते हैं, तो बस इस उत्तर की शुरुआत में JSFidlle उदाहरण खोलें, वांछित jQuery संस्करण में बदलें और "रन" पर क्लिक करें। यदि रंग होवर पर बदलता है, तो यह काम करता है।

।

संपादन 3 (9 मार्च, 2014): यह केवल तभी काम करता है जब jQuery अनुक्रम में एक ही तत्व हो

जैसा कि टिप्पणियों में @Wilmer द्वारा दिखाया गया है, उसके पास एक बेला है जो jQuery के संस्करणों I और अन्य के खिलाफ भी काम नहीं करता है। जब मैंने यह जानने की कोशिश की कि उसके मामले में क्या खास है तो मैंने देखा कि वह एक समय में कई तत्वों की जाँच करने की कोशिश कर रहा था। यह फेंक रहा था Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover।

तो, उसकी बेला के साथ काम करना, यह काम नहीं करता है:

var isHovered = !!$('#up, #down').filter(":hover").length;

जबकि यह काम करता है :

var isHovered = !!$('#up,#down').
                    filter(function() { return $(this).is(":hover"); }).length;

यह jQuery दृश्यों के साथ भी काम करता है, जिसमें एक ही तत्व होता है, जैसे कि मूल चयनकर्ता केवल एक तत्व से मेल खाता है, या यदि आप .first()परिणाम पर कॉल करते हैं, आदि।

यह मेरे जावास्क्रिप्ट + वेब देव टिप्स एंड रिसोर्स न्यूज़लेटर पर भी संदर्भित है ।

Comments

महान, सरल काम करता है। धन्यवाद मोहम्मद!

— जेम्स स्किडमोर

IE 8 में एक त्रुटि फेंकता है Syntax Error, unrecognized expression: hover. jquery-1.7.js line 4179:।

— 5

यह सच है। बस इसका परीक्षण किया। IE6 के लिए, इस हैक यहाँ वर्णित कोशिश peterned.home.xs4all.nl/csshover.html या सामान्य मंडराना करना प्रारंभ कर कुछ राज्य जोड़ सकते हैं और बाद में तरह समाधान के लिए यह साफ़ करें।

— मेलिगी

@ मैलीगी: मैंने यह बताने के लिए आपकी फिडेल को फोर्क किया है कि यह चयन में कई मदों के साथ काम नहीं कर रहा है: jsfiddle.net/p34n8

— SuperNova

इसके अलावा, अगर आप jQuery मोबाइल का उपयोग कर रहे हैं, तो यह उस पर शिकंजा कसता है- गिदोनों के उत्तर में फ़िडेल को चेक करें और jQuery मोबाइल 1.4.4 बॉक्स को चालू करें और आप देख सकते हैं कि यह तब काम नहीं करता है ... मैं इसके साथ इसकी पुष्टि कर सकता हूं १.४.२ अस्वस्थ :(

— डेविड ओ'सुल्लिवन

Answer 2

उपयोग:

var hovered = $("#parent").find("#element:hover").length;

jQuery 1.9+

Comments

यह शानदार ढंग से काम करता है। .Hover फ़ंक्शन और: होवर चयनकर्ता के प्रतिस्थापन के लिए ब्राउज़ करते समय सबसे अच्छा समाधान मिला। धन्यवाद!

— टायलर

एक जादू की तरह काम करता है! :)

— jroi_web

Answer 3

यह jQuery 1.9 में काम नहीं करता है। यह प्लगइन user2444818 के उत्तर पर आधारित है।

jQuery.fn.mouseIsOver = function () {
    return $(this).parent().find($(this).selector + ":hover").length > 0;
}; 

http://jsfiddle.net/Wp2v4/1/

Answer 4

होवर पर ध्वज सेट करें:

var over = false;
$('#elem').hover(function() {
  over = true;
},
function () {
  over = false;
});

तो बस अपने झंडे की जाँच करें।

Comments

सरल, लेकिन आसानी से पुन: उपयोग नहीं। : /

— ट्रेवर

मेरी विशेष स्थिति में काम करने का मन नहीं था, लेकिन मैं सहमत हूं कि अन्यथा जाने का एक अच्छा तरीका है। मेरे मामले में, जब मैं mouseleaveएक तत्व, मैं यह देखना चाहता हूं कि क्या माउस किसी अन्य विशेष तत्व में प्रवेश करता है।

— जेम्स स्किडमोर

@JamesSkidmore - मूसलीव इवेंट में आप उपयोग कर सकते हैं e.fromElementऔर e.toElement। क्या वह आपके लिए काम करेगा?

— म्रतशर्मन

आप इसे चयनकर्ता का उपयोग करने के लिए अद्यतन कर सकते हैं जो सभी लागू तत्वों को शामिल करता है, और उपयोग करने वाले व्यक्तिगत तत्वों पर ध्वज को संग्रहीत करता है .data()।

— nnnnnn

@Trevor - true - आपको तत्व पर स्थिति को संग्रहीत करने की आवश्यकता होगी, फिर एक फ़ंक्शन बनाएं जो तत्व की स्थिति (संभवतः डेटा-टैग) की जांच करता है।

— कीनकुटा

Answer 5

कुछ समय के लिए इस विषय पर काम करने के बाद जोड़े जाने वाले अपडेट:

1. jis 1.9.1 पर .is (": hover") के साथ सभी समाधान
2. अगर माउस अभी भी एक तत्व पर है, तो यह जांचने का सबसे संभावित कारण है कि एक दूसरे पर गोलीबारी की घटनाओं को रोकने का प्रयास किया जाए। उदाहरण के लिए, हम अपने माउसलेव के साथ समस्याएँ आ रहे थे और हमारे माउसइंटर इवेंट से पहले ही पूरा हो गया। बेशक यह एक त्वरित माउस आंदोलन के कारण था।

हमने इस मुद्दे को हल करने के लिए hoverIntent https://github.com/briancherne/jquery-hoverIntent का उपयोग किया । अनिवार्य रूप से यह ट्रिगर होता है यदि माउस आंदोलन अधिक जानबूझकर होता है। (एक बात का ध्यान रखें कि यह एक तत्व में प्रवेश करने और छोड़ने वाले दोनों माउस पर ट्रिगर होगा - यदि आप केवल एक पास को खाली फ़ंक्शन का उपयोग करना चाहते हैं)

Answer 6

आप सभी अभिमंत्रित तत्वों से अपनी अभिलाषा को फ़िल्टर कर सकते हैं। समस्यात्मक कोड:

element.filter(':hover')

कोड सहेजें:

jQuery(':hover').filter(element)

बूलियन वापस करने के लिए:

jQuery(':hover').filter(element).length===0

Answer 7

स्वीकृत जवाब मेरे लिए JQuery पर काम नहीं किया। 2.x .is(":hover")हर कॉल पर गलत रिटर्न देता है।

मैं काम करता है कि एक बहुत ही सरल समाधान के साथ समाप्त हुआ:

function isHovered(selector) {

    return $(selector+":hover").length > 0

}

Answer 8

@ मोहम्मद के जवाब पर विस्तार। आप थोड़े एनकैप्सुलेशन का उपयोग कर सकते हैं

ऐशे ही:

jQuery.fn.mouseIsOver = function () {
    if($(this[0]).is(":hover"))
    {
        return true;
    }
    return false;
}; 

इसका उपयोग करें जैसे:

$("#elem").mouseIsOver();//returns true or false

फिड्ड फोर्क: http://jsfiddle.net/cgWdF/1/

Comments

ऐसा करने के लिए, आप भी ऐसा कर सकते हैं: jQuery.fn.mouseIsOver = function () {रिटर्न $ (यह [0]) है। (': hover')}; कम कोड

— Lathan

यह केवल $ ('# हाथी') करने के लिए कितना कठिन है। (': होवर')

— भाग्यशालीकृ

ज्यादा मेहनत की बात नहीं है, लेकिन इरादे स्पष्ट रूप से व्यक्त किए जाते हैं। लेकिन प्रत्येक के लिए यह अपना है।

— गिदोन

Answer 9

मुझे पहली प्रतिक्रिया पसंद है, लेकिन मेरे लिए यह अजीब है। जब माउस के लिए पृष्ठ लोड होने के बाद जांचने का प्रयास किया जाता है, तो मुझे काम करने के लिए कम से कम 500 मिलीसेकंड की देरी करनी होगी:

$(window).on('load', function() {
    setTimeout(function() {
        $('img:hover').fadeOut().fadeIn();
    }, 500);
});

http://codepen.io/molokoloco/pen/Grvkx/

Answer 10

किन्नकुटा के उत्तर के प्रति एक झंडा लगाना उचित प्रतीत होता है, आप एक श्रोता को शरीर पर रख सकते हैं ताकि आप जांच सकें कि किसी तत्व को एक विशेष पल में मँडराया जा रहा है या नहीं।

हालांकि, आप बच्चे के नोड्स से कैसे निपटना चाहते हैं? आपको शायद जांचना चाहिए कि क्या तत्व वर्तमान में होवर किए गए तत्व का पूर्वज है।

<script>

var isOver = (function() {
  var overElement;
  return {

    // Set the "over" element
    set: function(e) {
      overElement = e.target || e.srcElement;
    },

    // Return the current "over" element
    get: function() {
      return overElement;    
    },

    // Check if element is the current "over" element
    check: function(element) {
      return element == overElement;
    },

    // Check if element is, or an ancestor of, the 
    // current "over" element
    checkAll: function(element) {
      while (overElement.parentNode) {
         if (element == overElement) return true;
         overElement = overElement.parentNode;
      }
      return false;
    }
  };
}());


// Check every second if p0 is being hovered over
window.setInterval( function() {
  var el = document.getElementById('p0');
  document.getElementById('msg').innerHTML = isOver.checkAll(el);
}, 1000);


</script>

<body onmouseover="isOver.set(event);">
  <div>Here is a div
    <p id="p0">Here is a p in the div<span> here is a span in the p</span> foo bar </p>
  </div>
  <div id="msg"></div>
</body>