अगर jQuery में एक तत्व से अधिक माउस है तो मैं कैसे जांचूं?

Question

क्या jQuery में ऐसा करने का एक त्वरित और आसान तरीका है जो मुझे याद आ रहा है?

मैं माउसओवर इवेंट का उपयोग नहीं करना चाहता क्योंकि मैं पहले से ही इसे किसी और चीज़ के लिए उपयोग कर रहा हूं। मुझे बस यह जानने की जरूरत है कि माउस किसी निश्चित समय पर किसी तत्व से अधिक है या नहीं।

मैं ऐसा कुछ करना चाहता हूं, अगर केवल "इस्मोवर" फ़ंक्शन था:

function hideTip(oi) {
    setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}

Comments

अधिकांश उद्देश्यों के लिए दिए गए उत्तर पर्याप्त हैं, लेकिन ऐसे मामले हैं जब माउसिन / आउट पर्याप्त नहीं है। उदाहरण के लिए, जब माउस अब मेनू हेड या मेन्यू बॉडी पर नहीं होता है तब एक मेनू को छिपाया जाता है।

— मार्कस डाउनिंग

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

— mothmonsterman

# मारकस: यदि किसी मेनू को छिपाया जाता है, तो इसके बारे में जाने का बेहतर तरीका क्या है?

— कोडरमा

मेरा उत्तर देखें stackoverflow.com/questions/9827095/…

— Sanne

अगर इसका सबसे अच्छा जवाब हल के रूप में चिह्नित किया गया होता तो मैं इसे वोट कर देता।

— बीबीसिंगर

Answer 1

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

फ़ेडआउट के कॉलबैक पर डेटा निकालें।

माउसएंटर / मूसलीव का उपयोग करना वास्तव में कम खर्चीला है क्योंकि वे मीनू के लिए फायर नहीं करते हैं जब बच्चे माउसओवर / माउसआउट करते हैं।

Comments

@ आर्थर ने यहीं किया, क्या आपको अभी भी अधिक जानकारी की आवश्यकता है? stackoverflow.com/a/1670561/152640

— mothmonsterman

Answer 2

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

$("someelement").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find(".tooltip").fadeIn("slow");
}).mouseleave(function(){
    var someElement = $(this),
        timeoutId = setTimeout(function(){
            someElement.find(".tooltip").fadeOut("slow");
        }, 650);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId); 
});

Answer 3

एक साफ और सुंदर होवर चेक:

if ($('#element:hover').length != 0) {
    // do something ;)
}

Comments

बिल्कुल - यह चयनित उत्तर होना चाहिए! वैसे भी, यहाँ इसके लिए एक

— पहेली है

किसी तत्व के होवर होने की जाँच कैसे करें: stackoverflow.com/questions/8981463/…

— केविन व्हीलर

Answer 4

चेतावनी: is(':hover')1.8+ jquery में पदावनत किया गया है। समाधान के लिए इस पोस्ट को देखें ।

आप इस उत्तर का भी उपयोग कर सकते हैं: https://stackoverflow.com/a/6035278/8843 अगर माउस एक घटक है तो परीक्षण करने के लिए:

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

Comments

यह कहीं भी (afik) प्रलेखित नहीं है और गतिशील रूप से दिखाए गए तत्वों (मेनू की तरह) के साथ सटीक नहीं लगता है ..

— लैम्बिनेटर

jQuery 1.9.1 के रूप में टूट गया !! इसके बजाय इवो के समाधान का उपयोग करें

— मैथेडिनक्लाउड्स

अनकवर्ड एरर: सिंटैक्स त्रुटि, गैर-मान्यताप्राप्त अभिव्यक्ति: असमर्थित छद्म: होवर

— जूलियो मरीन्स

चेतावनी : :hoverएक मान्य jQuery चयनकर्ता नहीं है: api.jquery.com/category/selectors (स्रोत: bugs.jquery.com/ticket/11574 )

— पैंग

यह अभी भी काम करता है अगर ब्राउज़र समर्थन करता हैdocument.querySelectorAll(':hover')

— ekuusela

Answer 5

आप hoverमैन्युअल रूप से ट्रैक रखने के लिए jQuery की घटना का उपयोग कर सकते हैं :

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!

Comments

डेटा का उपयोग क्यों करें () और नहीं जोड़ें / निकालेंक्लास ()? क्या एक से बढ़कर एक कलाकार हैं?

— सायकोटिक

@psychotik: हाँ; $.dataस्ट्रिंग हेरफेर शामिल नहीं है।

— SLaks

मैंने इसे एक वर्ग में लपेटा: stackoverflow.com/questions/1273566/…

— ripper234

Answer 6

मुझे वास्तव में कुछ इस तरह की आवश्यकता थी (थोड़ा अधिक जटिल वातावरण में और बहुत सारे 'माउसएंटर' और 'मूसलीव्स' के साथ समाधान ठीक से काम नहीं कर रहा था) इसलिए मैंने थोड़ा jquery प्लगइन बनाया जो विधि ismouseover जोड़ता है। इसने अब तक बहुत अच्छा काम किया है।

//jQuery ismouseover  method
(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

फिर दस्तावेज़ के किसी भी स्थान पर यो इसे इस तरह कहते हैं और यह सही या गलत है:

$("#player").ismouseover()

मैंने इसे IE7 +, Chrome 1+ और फ़ायरफ़ॉक्स 4 पर परीक्षण किया और ठीक से काम कर रहा है।

Comments

यह मूषक

— wrygiel

उत्तम। फंक्शन एक्सप्रेशन (IIFE) को तुरंत लागू किया जाता है जो अस्पष्टता ओवरले के साथ तत्व के नीचे वस्तुओं को लक्षित करने के मुद्दे को हल करता है। प्रतिभाशाली! इसके लिए शुक्रिया।

— अलेक्जेंडर डिक्सन

Answer 7

JQuery में आप .is (': hover') का उपयोग कर सकते हैं, इसलिए

function IsMouseOver(oi)
{
   return $(oi).is(':hover');
}

अब ओपी में अनुरोधित समारोह प्रदान करने का सबसे संक्षिप्त तरीका होगा।

नोट: उपरोक्त IE8 या उससे कम में काम नहीं करता है

IE8 में काम करने वाले कम रसीले विकल्प के रूप में (अगर मैं IE9 के IE8 मॉडस पर भरोसा कर सकता हूं), और ऐसा $(...).hover(...)सभी जगह पर ट्रिगर किए बिना करता है, और न ही तत्व के लिए चयनकर्ता को जानने की आवश्यकता है (जिस स्थिति में Ivo का जवाब आसान है:

function IsMouseOver(oi)
{
    return oi.length && 
           oi.parent()
             .find(':hover')
             .filter(function(s){return oi[0]==this})
             .length > 0;
}

Comments

यह मान्य jQuery चयनकर्ता नहीं है! लोगों को इस पद्धति का सुझाव देना बंद करना होगा। यह हर जगह है और IE8 के साथ संगत नहीं है।

— Sanne

IE8 के लिए समाधान के लिए मेरे अन्य उत्तर को देखें

— Sanne

@Sanne यह उत्सुक है, क्योंकि IE8 में काम $(':hover') करता है । यह एक मान्य CSS2 छद्म चयनकर्ता है, इसलिए इसे काम करना चाहिए।

— towr

Answer 8

मैंने SLaks का विचार लिया और इसे एक छोटे वर्ग में लपेटा ।

function HoverWatcher(selector){
  this.hovering = false;
  var self = this; 

  this.isHoveringOver = function() { 
    return self.hovering; 
  } 

    $(selector).hover(function() { 
      self.hovering = true; 
    }, function() { 
      self.hovering = false; 
    }) 
} 

var box1Watcher = new HoverWatcher('#box1');
var box2Watcher = new HoverWatcher('#box2');



$('#container').click(function() {
  alert("box1.hover = " + box1Watcher.isHoveringOver() +
        ", box2.hover = " + box2Watcher.isHoveringOver());
});

Answer 9

भविष्य के खोजकर्ताओं के लिए JUST FYI करें।

मैंने एक jQuery प्लगइन बनाया जो यह और बहुत कुछ कर सकता है। मेरे प्लगइन में, सभी तत्वों को प्राप्त करने के लिए कर्सर वर्तमान में मँडरा हुआ है, बस निम्नलिखित कार्य करें:

$.cursor("isHover"); // will return jQ object of all elements the cursor is 
                     // currently over & doesn't require timer

जैसा कि मैंने उल्लेख किया है, इसके अन्य उपयोग भी हैं जैसा कि आप देख सकते हैं

jsField यहाँ पाया गया

Answer 10

जैसा कि मैं टिप्पणी नहीं कर सकता, इसलिए मैं इसे उत्तर के रूप में लिखूंगा!

कृपया सीएसएस चयनकर्ता ": हॉवर" और हॉवर ईवेंट के बीच अंतर को समझें!

", होवर" एक सीएसएस चयनकर्ता है और इसे इस तरह से उपयोग किए जाने पर वास्तव में घटना के साथ हटा दिया गया था $("#elementId").is(":hover"), लेकिन इसका अर्थ यह है कि इसका वास्तव में jQuery इवेंट होवर से कोई लेना-देना नहीं है।

यदि आप कोड करते हैं $("#elementId:hover"), तो तत्व केवल तब चुना जाएगा जब आप माउस के साथ होवर करेंगे। उपरोक्त कथन शुद्ध और वैध css चयन के साथ इस तत्व का चयन करते हुए सभी jQuery के संस्करणों के साथ काम करेगा।

दूसरी ओर इवेंट होवर जो है

$("#elementId").hover(
     function() { 
         doSomething(); 
     }
); 

वास्तव में jQuery के रूप में पदावनत किया गया है 1.8 यहाँ jQuery वेबसाइट से राज्य:

जब ईवेंट नाम "होवर" का उपयोग किया जाता है, तो इवेंट सबसिस्टम इसे इवेंट स्ट्रिंग में "माउसेंटर मूसलीवेज़" में परिवर्तित कर देता है। यह कई कारणों से कष्टप्रद है:

शब्दार्थ: होवरिंग माउस में प्रवेश करने और एक तत्व को छोड़ने के समान नहीं है, यह फायरिंग से पहले कुछ मात्रा में मंदी या देरी का तात्पर्य करता है। घटना का नाम: Event.type संलग्न हैंडलर द्वारा वापस लौटाया गया होवर नहीं है, लेकिन माउसएंटर या मूसलीव है। कोई अन्य घटना ऐसा नहीं करती है। "होवर" नाम का सह-विरोध: "होवर" नाम के साथ किसी ईवेंट को जोड़ना संभव नहीं है और इसे .trigger ("होवर") का उपयोग करके आग लगाना। डॉक्स पहले से ही इस नाम को "नए कोड के लिए दृढ़ता से हतोत्साहित" कहते हैं, मैं इसे आधिकारिक तौर पर 1.8 के लिए पदावनत करना चाहता हूं और अंत में इसे हटा दूंगा।

उन्होंने उपयोग को क्यों हटाया (": hover") अस्पष्ट है, लेकिन ओह ठीक है, आप अभी भी इसे ऊपर की तरह उपयोग कर सकते हैं और यहां अभी भी इसका उपयोग करने के लिए थोड़ा हैक है।

(function ($) {
   /** 
    * :hover selector was removed from jQuery 1.8+ and cannot be used with .is(":hover") 
    * but using it in this way it works as :hover is css selector! 
    *
    **/
    $.fn.isMouseOver = function() {
        return $(this).parent().find($(this).selector + ":hover").length > 0;
    };
})(jQuery);

ओह और मैं टाइमआउट संस्करण को दोबारा नहीं लाऊंगा क्योंकि यह बहुत अधिक जटिलता लाता है , इस तरह के सामान के लिए टाइमआउट फंक्शंस का उपयोग करें यदि कोई अन्य तरीका नहीं है और मेरा विश्वास करो, सभी मामलों में 95% प्रतिशत में एक और तरीका है !

आशा है कि मैं एक जोड़े की मदद कर सकता हूँ।

अभिवादन एंडी

Answer 11

आप दोनों को धन्यवाद। कुछ बिंदु पर मुझे यह पता लगाने की कोशिश करना छोड़ना पड़ा कि क्या माउस अभी भी तत्व से अधिक था। मुझे पता है कि यह संभव है, लेकिन पूरा करने के लिए बहुत अधिक कोड की आवश्यकता हो सकती है।

मुझे थोड़ा समय लगा लेकिन मैंने आपके दोनों सुझाव ले लिए और कुछ ऐसा किया जो मेरे लिए काम करेगा।

यहाँ एक सरलीकृत (लेकिन कार्यात्मक) उदाहरण दिया गया है:

$("[HoverHelp]").hover (
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).css("top", $(this).position().top + 25);
        $(HelpID).css("left", $(this).position().left);
        $(HelpID).attr("fadeout", "false");
        $(HelpID).fadeIn();
    },
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).attr("fadeout", "true");
        setTimeout(function() { if ($(HelpID).attr("fadeout") == "true") $(HelpID).fadeOut(); }, 100);
    }
);

और फिर कुछ पाठ पर यह काम करने के लिए यह सब मुझे करना है:

<div id="tip_TextHelp" style="display: none;">This help text will show up on a mouseover, and fade away 100 milliseconds after a mouseout.</div>

This is a <span class="Help" HoverHelp="tip_TextHelp">mouse over</span> effect.

बहुत सारे सीएसएस सीएसएस के साथ, यह कुछ बहुत अच्छे माउसओवर की मदद करता है टूलटिप्स। वैसे, मुझे चेकआउट और पाठ के बीच छोटे अंतराल के कारण माउसआउट में देरी की आवश्यकता थी जो माउस को स्थानांतरित करने में आपकी मदद करने के लिए फ्लैश करने का कारण बन रहा था। लेकिन यह एक आकर्षण की तरह काम करता है। मैंने फोकस / ब्लर घटनाओं के लिए भी कुछ ऐसा ही किया।

Answer 12

मैं इसके लिए बहुत समय से उपयोग किए जाने वाले टाइमआउट देखता हूं, लेकिन किसी घटना के संदर्भ में, आप निर्देशांक को नहीं देख सकते, जैसे ::?

function areXYInside(e){  
        var w=e.target.offsetWidth;
        var h=e.target.offsetHeight;
        var x=e.offsetX;
        var y=e.offsetY;
        return !(x<0 || x>=w || y<0 || y>=h);
}

संदर्भ के आधार पर, आपको areXYInside (e) को कॉल करने से पहले यह सुनिश्चित करना होगा (यह == e.target)।

fyi- मैं ड्रैगलीव हैंडलर के अंदर इस दृष्टिकोण का उपयोग कर रहा हूं, ताकि यह पुष्टि हो सके कि ड्रैगवेल घटना को एक बाल तत्व में जाने से ट्रिगर नहीं किया गया था। यदि आप किसी तरह की जाँच नहीं करते हैं कि आप अभी भी मूल तत्व के अंदर हैं, तो आप गलती से कार्रवाई कर सकते हैं जो केवल तब के लिए है जब आप वास्तव में माता-पिता को छोड़ देते हैं।

EDIT: यह एक अच्छा विचार है, लेकिन लगातार पर्याप्त काम नहीं करता है। शायद कुछ छोटे ट्वीक के साथ।

Answer 13

आप परीक्षण कर सकते हैं कि jQueryक्या किसी भी बच्चे के लिए एक निश्चित कक्षा है। फिर उस वर्ग को लागू करने पर जब आप एक निश्चित div पर माउस निकालते हैं, तो आप परीक्षण कर सकते हैं कि क्या आपका माउस इसके ऊपर है, तब भी जब आप पृष्ठ पर एक अलग तत्व पर माउस रखते हैं, तो इस तरह से बहुत कम कोड। मैंने इसका इस्तेमाल किया क्योंकि मेरे पास एक पॉप-अप में divs के बीच रिक्त स्थान था, और मैं केवल पॉप अप को बंद करना चाहता था जब मैं पॉप अप से दूर चला गया था, न कि जब मैं पॉप में अपने माउस को अंतरिक्ष में घुमा रहा था। इसलिए मैंने कंटेंट डिव (जो पॉप अप खत्म हो गया था) पर एक माउसओवर फंक्शन बुलाया, लेकिन यह केवल क्लोज फंक्शन को ट्रिगर करेगा जब मैंने कॉन्टेंट डिव पर मूस किया, और पॉप अप के बाहर था!

$ ( "। पॉप-अप")। माउसओवर (समारोह (ई)
    {
    $ (इस) .addClass ( "पर");
    });

$ ( "। पॉप-अप")। Mouseout (समारोह (ई)
    {
    $ (इस) .removeClass ( "पर");
    });


$ ( "# MainContent")। माउसओवर (समारोह (ई) {
            अगर ($! ("विस्तारित।")। हैक्लास ("ओवर")) {
            Drupal.dhtmlMenu.toggleMenu ($ () "का विस्तार किया।");
        }
    });

Answer 14

यह इसे करने का सबसे आसान तरीका होगा!

  function(oi) 
  {
   if(!$(oi).is(':hover')){$(oi).fadeOut(100);}
  }

Answer 15

यहाँ एक तकनीक है जो jquery पर निर्भर नहीं है और देशी DOM matches API का उपयोग करता है । यह IE9 पर वापस जाने वाले ब्राउज़र का समर्थन करने के लिए विक्रेता उपसर्गों का उपयोग करता है। देखें caniuse.com पर matchesselector पूर्ण विवरण के लिए।

पहले माचिस बनाने का कार्य, जैसे:

var matchesSelector = (function(ElementPrototype) {
var fn = ElementPrototype.matches ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.mozMatchesSelector ||
          ElementPrototype.msMatchesSelector;

return function(element, selector) {
  return fn.call(element, selector);
};

})(Element.prototype);

फिर, हॉवर का पता लगाने के लिए:

var mouseIsOver = matchesSelector(element, ':hover');

Answer 16

मैंने एक अन्य प्रश्न में इसका उत्तर दिया है, सभी विवरणों के साथ आपको आवश्यकता हो सकती है:

पता लगाएं कि क्या jQuery के साथ तत्व पर मंडरा रहा है (लिखने के समय 99 upvotes है)

मूल रूप से, आप कुछ ऐसा कर सकते हैं:

var ishovered = oi.is(":hover");

यह केवल तभी काम करता है जब oiकिसी एकल तत्व वाला jQuery ऑब्जेक्ट हो। यदि कई तत्व मेल खाते हैं, तो आपको प्रत्येक तत्व पर आवेदन करना होगा, उदाहरण के लिए:

var hoveredItem = !!$('ol>li').filter(function() { return $(this).is(":hover"); });
                  // not .filter(':hover'), as we can't apply :hover on multiple elements

यह jQuery 1.7 शुरू करने का परीक्षण किया गया था।

Answer 17

यहां एक फ़ंक्शन है जो आपको यह जांचने में मदद करता है कि माउस किसी तत्व के अंदर है या नहीं। केवल एक चीज जो आपको करनी चाहिए, वह फ़ंक्शन को कॉल करने के लिए है जहां आपके पास एक लाइव माउस-संबंधित EventObject हो सकता है। कुछ इस तरह:

$("body").mousemove(function(event){
     element_mouse_is_inside($("#mycontainer", event, true, {});
});

आप स्रोत कोड को यहाँ github या पोस्ट के नीचे देख सकते हैं:

https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js

function element_mouse_is_inside  (elementToBeChecked, mouseEvent, with_margin, offset_object)
{
    if(!with_margin)
    {
        with_margin = false;
    }
    if(typeof offset_object !== 'object')
    {
        offset_object = {};
    }
    var elm_offset = elementToBeChecked.offset();
    var element_width = elementToBeChecked.width();
    element_width += parseInt(elementToBeChecked.css("padding-left").replace("px", ""));
    element_width += parseInt(elementToBeChecked.css("padding-right").replace("px", ""));
    var element_height = elementToBeChecked.height();
    element_height += parseInt(elementToBeChecked.css("padding-top").replace("px", ""));
    element_height += parseInt(elementToBeChecked.css("padding-bottom").replace("px", ""));
    if( with_margin)
    {
        element_width += parseInt(elementToBeChecked.css("margin-left").replace("px", ""));
        element_width += parseInt(elementToBeChecked.css("margin-right").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-top").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-bottom").replace("px", ""));
    }

    elm_offset.rightBorder = elm_offset.left+element_width;
    elm_offset.bottomBorder = elm_offset.top+element_height;

    if(offset_object.hasOwnProperty("top"))
    {
        elm_offset.top += parseInt(offset_object.top);
    }
    if(offset_object.hasOwnProperty("left"))
    {
        elm_offset.left += parseInt(offset_object.left);
    }
    if(offset_object.hasOwnProperty("bottom"))
    {
        elm_offset.bottomBorder += parseInt(offset_object.bottom);
    }
    if(offset_object.hasOwnProperty("right"))
    {
        elm_offset.rightBorder += parseInt(offset_object.right);
    }
    var mouseX = mouseEvent.pageX;
    var mouseY = mouseEvent.pageY;

    if(  (mouseX > elm_offset.left && mouseX < elm_offset.rightBorder)
        && (mouseY > elm_offset.top && mouseY < elm_offset.bottomBorder) )
    {
        return true;
    }
    else
    {
        return false;
    }
}

Answer 18

'हैपीटाइम हैरी' ने जो कहा, उस पर विस्तार करते हुए, टाइमआउट आईडी को संग्रहीत करने के लिए .data () jquery फ़ंक्शन का उपयोग करना सुनिश्चित करें। ऐसा तब होता है जब आप टाइमआउट आईडी को बहुत आसानी से प्राप्त कर सकते हैं जब 'माउसएंटर' बाद में उसी तत्व पर चालू हो जाता है, तो आप अपने टूलटिप को गायब करने के लिए ट्रिगर को समाप्त करने की अनुमति देते हैं।

Answer 19

आप jQuery के माउसेंटर और मूसलीव इवेंट का उपयोग कर सकते हैं। आप एक ध्वज सेट कर सकते हैं जब माउस वांछित क्षेत्र में प्रवेश करता है और उस क्षेत्र को छोड़ने पर ध्वज को खोल देता है।

Comments

यही मैं करने की सोच रहा था। SLDs के रूप में $ .data () का उपयोग करना यह पूरा करने का एक अच्छा तरीका है।

— JamesBrownIsDead

Answer 20

मैंने इस विषय से विचारों को जोड़ा और इसके साथ आया, जो एक सबमेनू को दिखाने / छिपाने के लिए उपयोगी है:

$("#menu_item_a").mouseenter(function(){
   clearTimeout($(this).data('timeoutId'));
   $("#submenu_a").fadeIn("fast");
}).mouseleave(function(){
   var menu_item = $(this);

   var timeoutId = setTimeout(function(){
      if($('#submenu_a').is(':hover'))
      {
        clearTimeout(menu_item.data('timeoutId'));
      }
      else
      {
        $("#submenu_a").fadeOut("fast");
      }
   }, 650);

    menu_item.data('timeoutId', timeoutId); 
});

 $("#submenu_a").mouseleave(function(){
   $(this).fadeOut("fast");
 });

लगता है मेरे लिए काम करता है। आशा है कि यह किसी की मदद करता है।

संपादित करें: अब इस दृष्टिकोण का एहसास IE में सही ढंग से काम नहीं कर रहा है।

Answer 21

मैं ऊपर दिए गए किसी भी सुझाव का उपयोग नहीं कर सका।
मैं अपना समाधान क्यों पसंद करूं?
यह विधि जांचती है कि क्या माउस आपके द्वारा चुने गए किसी भी समय एक तत्व से अधिक है ।
माउसएंटर और : होवर शांत होते हैं, लेकिन माउस को केवल तभी घुमाते हैं जब आप माउस को स्थानांतरित करते हैं, न कि जब तत्व माउस के नीचे जाता है।
: मंडराना बहुत प्यारा है, लेकिन ... IE

इसलिए मैं यह करता हूं:

कोई 1. स्टोर माउस x, y स्थिति हर बार जब आप की जरूरत हो तो स्थानांतरित कर दिया जाता है,
नहीं 2. जाँच करें कि क्या माउस किसी भी ऐसे तत्व से अधिक है जो क्वेरी से मेल खाता है ... जैसे एक माउसइंटर घटना को ट्रिगर करना

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

Answer 22

ऊपर दिए गए लोकप्रिय और सहायक आर्थर गोल्डस्मिथ के उत्तर के बारे में बस एक नोट: यदि आप अपने माउस को IE में एक तत्व से दूसरे में ले जा रहे हैं (कम से कम IE 9 तक) तो आपको नए तत्व के सही तरीके से काम करने में कुछ परेशानी हो सकती है पारदर्शी पृष्ठभूमि (जो यह डिफ़ॉल्ट रूप से होगी)। मेरा वर्कअराउंड नया तत्व एक पारदर्शी पृष्ठभूमि छवि दे रहा था।

Answer 23

$(document).hover(function(e) {
    alert(e.type === 'mouseenter' ? 'enter' : 'leave');
});

---

बेला

Answer 24

आप is(':visible');jquery में और $ के लिए उपयोग कर सकते हैं ('। आइटम: होवर') यह Jquery में भी काम कर रहा है।

यह एक htm कोड स्निपेट है:

    <li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>

और यह जेएस कोड है:

$('.menutop > li').hover(function() {//,.menutop li ul

    $(this).find('ul').show('fast');

},function() {
    if($(this).find('ul').is(':hover'))
    $(this).hide('fast');

});

 $('.root + ul').mouseleave(function() {
    if($(this).is(':visible'))
    $(this).hide('fast');

});

यह मैं किस बारे में बात कर रहा था :)

Comments

मैं यह नहीं देख रहा हूं कि पूछे गए प्रश्न से संबंधित कैसे है।

— एंड्रयू बार्बर

जब आप माउसओवर से बाहर जाते हैं और अपने छिपे हुए तत्व को प्रदर्शित करते हैं तो आप इसका उपयोग कर सकते हैं और एक देरी के बाद आप यह देख सकते हैं कि क्या माउस दिखाई देने पर लक्ष्य तत्व में प्रवेश करता है जिसे आप छिपाना चाहते हैं / शो

— ucefkh

मुझे नहीं लगता कि आप इस प्रश्न को बहुत अच्छी तरह से पढ़ सकते हैं। यह वह नहीं है जो उसे चाहिए।

— एंड्रयू नाई

आप जो कर रहे हैं वह इस प्रश्न से संबंधित नहीं है । (जाहिरा तौर पर

— एंड्रयू बार्बर