Gibt es eine schnelle und einfache Möglichkeit, dies in jQuery zu tun, die mir fehlt?

Ich möchte das Mouseover-Ereignis nicht verwenden, da ich es bereits für etwas anderes verwende. Ich muss nur wissen, ob sich die Maus zu einem bestimmten Zeitpunkt über einem Element befindet.

Ich würde gerne so etwas machen, wenn es nur eine "IsMouseOver" -Funktion gäbe:

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

Legen Sie im Mouseout ein Timeout fest, um den Rückgabewert für Daten im Objekt auszublenden und zu speichern. Brechen Sie dann bei einer Mausübergabe das Zeitlimit ab, wenn die Daten einen Wert enthalten.

Entfernen Sie die Daten beim Rückruf des Fadeouts.

Es ist tatsächlich billiger, Mouseenter / Mouseleave zu verwenden, da sie nicht für das Menü ausgelöst werden, wenn Kinder Mouseover / Mouseout auslösen.

Dieser Code zeigt, was Happytime Harry und ich zu sagen versuchen. Wenn die Maus eintritt, wird ein Tooltip angezeigt. Wenn die Maus sie verlässt, wird eine Verzögerung für das Verschwinden festgelegt. Wenn die Maus dasselbe Element eingibt, bevor die Verzögerung ausgelöst wird, zerstören wir den Auslöser, bevor er mit den zuvor gespeicherten Daten ausgelöst wird.

$("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); 
});

Ein sauberer und eleganter Hover Check:

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

WARNUNG: is(':hover')ist in jquery 1.8+ veraltet. In diesem Beitrag finden Sie eine Lösung.

Sie können auch diese Antwort verwenden: https://stackoverflow.com/a/6035278/8843 , um zu testen, ob sich die Maus über einem Element befindet:

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

Sie können das hoverEreignis von jQuery verwenden , um den Überblick manuell zu behalten:

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

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

Ich brauchte genau das (in einer etwas komplexeren Umgebung und die Lösung mit vielen 'Mouseenters' und 'Mouseleaves' funktionierte nicht richtig), also habe ich ein kleines JQuery-Plugin erstellt, das die Methode ismouseover hinzufügt. Bisher hat es ziemlich gut funktioniert.

//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);

Dann rufen Sie es an einer beliebigen Stelle des Dokuments so auf und es gibt true oder false zurück:

$("#player").ismouseover()

Ich habe es auf IE7 +, Chrome 1+ und Firefox 4 getestet und funktioniert ordnungsgemäß.

In jQuery können Sie also .is (': hover') verwenden

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

wäre jetzt die prägnanteste Möglichkeit, die im OP angeforderte Funktion bereitzustellen.

Hinweis: Das Obige funktioniert nicht in IE8 oder niedriger

Als weniger prägnante Alternative, die in IE8 funktioniert (wenn ich dem IE8-Modus von IE9 vertrauen kann), ohne dies $(...).hover(...)überall auszulösen, und auch keine Auswahl eines Selektors für das Element erfordert (in diesem Fall ist die Antwort von Ivo einfacher):

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

Ich nahm die Idee von SLaks und wickelte sie in eine kleine Klasse ein .

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());
});

Nur zu Ihrer Information für zukünftige Finder davon.

Ich habe ein jQuery-Plugin erstellt, das dies und vieles mehr kann. Um in meinem Plugin alle Elemente zu erhalten, über die der Cursor gerade bewegt wird, gehen Sie einfach wie folgt vor:

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

Wie ich bereits erwähnt habe, hat es auch viele andere Verwendungszwecke, wie Sie in der sehen können

jsFiddle hier gefunden

Da ich keinen Kommentar abgeben kann, werde ich dies als Antwort schreiben!

Bitte haben Sie Verständnis für den Unterschied zwischen dem CSS-Selektor ": hover" und dem Hover-Ereignis!

": hover" ist ein CSS-Selektor und wurde bei dieser Verwendung tatsächlich mit dem Ereignis entfernt $("#elementId").is(":hover") , aber in seiner Bedeutung hat es wirklich nichts mit dem jQuery-Ereignis-Hover zu tun.

wenn Sie codieren $("#elementId:hover") , wird das Element nur ausgewählt, wenn Sie mit der Maus darüber fahren. Die obige Anweisung funktioniert mit allen jQuery-Versionen, wenn Sie dieses Element mit reiner und legitimer CSS-Auswahl auswählen.

Auf der anderen Seite schwebt das Ereignis, das ist

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

wird in der Tat als jQuery 1.8 hier der Status von der jQuery-Website verworfen:

Wenn der Ereignisname "hover" verwendet wird, konvertiert das Ereignissubsystem ihn in der Ereigniszeichenfolge in "mouseenter mouseleave". Dies ist aus mehreren Gründen ärgerlich:

Semantik: Das Schweben ist nicht dasselbe wie das Betreten und Verlassen eines Elements durch die Maus. Es impliziert eine gewisse Verzögerung oder Verzögerung vor dem Abfeuern. Ereignisname: Der vom angehängten Handler zurückgegebene event.type ist kein Hover, sondern entweder mouseenter oder mouseleave. Kein anderes Ereignis tut dies. Kooptieren des Namens "Hover": Es ist nicht möglich, ein Ereignis mit dem Namen "Hover" anzuhängen und mit .trigger ("Hover") auszulösen. Die Dokumente nennen diesen Namen bereits "stark von neuem Code abgeraten". Ich möchte ihn offiziell für 1.8 ablehnen und ihn schließlich entfernen.

Warum sie die Verwendung entfernt haben, ist (": hover") unklar, aber na ja, Sie können es immer noch wie oben verwenden und hier ist ein kleiner Hack, um es weiterhin zu verwenden.

(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);

Oh, und ich würde die Timeout-Version nicht empfehlen, da dies viel Komplexität mit sich bringt. Verwenden Sie Timeout-Funktionen für diese Art von Dingen, wenn es keinen anderen Weg gibt, und glauben Sie mir, in 95% aller Fälle gibt es einen anderen Weg !

Ich hoffe, ich konnte ein paar Leuten da draußen helfen.

Greetz Andy

Danke euch beiden. Irgendwann musste ich aufgeben, um festzustellen, ob sich die Maus noch über dem Element befand. Ich weiß, dass dies möglich ist, erfordert jedoch möglicherweise zu viel Code, um dies zu erreichen.

Es hat eine Weile gedauert, aber ich habe Ihre beiden Vorschläge aufgegriffen und mir etwas ausgedacht, das für mich funktionieren würde.

Hier ist ein vereinfachtes (aber funktionales) Beispiel:

$("[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);
    }
);

Und damit diese Arbeit an einem Text funktioniert, muss ich nur Folgendes tun:

<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.

Zusammen mit viel ausgefallenem CSS ermöglicht dies einige sehr nette Mouseover-Hilfetools. Übrigens brauchte ich die Verzögerung beim Mouseout wegen winziger Lücken zwischen Kontrollkästchen und Text, die dazu führten, dass die Hilfe beim Bewegen der Maus blitzte. Aber das funktioniert wie ein Zauber. Ähnliches habe ich auch für die Focus / Blur-Events gemacht.

Ich sehe, dass dafür häufig Zeitüberschreitungen verwendet werden, aber können Sie im Zusammenhang mit einem Ereignis nicht die Koordinaten wie diese anzeigen?:

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);
}

Je nach Kontext müssen Sie möglicherweise sicherstellen (this == e.target), bevor Sie areXYInside (e) aufrufen.

Zu Ihrer Information möchte ich diesen Ansatz in einem DragLeave-Handler verwenden, um zu bestätigen, dass das DragLeave-Ereignis nicht durch das Aufrufen eines untergeordneten Elements ausgelöst wurde. Wenn Sie nicht irgendwie überprüfen, ob Sie sich noch im übergeordneten Element befinden, können Sie fälschlicherweise Maßnahmen ergreifen, die nur dann vorgesehen sind, wenn Sie das übergeordnete Element wirklich verlassen.

EDIT: Dies ist eine schöne Idee, funktioniert aber nicht konsequent genug. Vielleicht mit ein paar kleinen Änderungen.

Sie können testen, jQueryob ein untergeordnetes Div eine bestimmte Klasse hat. Wenn Sie diese Klasse dann anwenden, wenn Sie mit der Maus über ein bestimmtes Div fahren, können Sie testen, ob sich Ihre Maus darüber befindet, selbst wenn Sie mit der Maus über ein anderes Element auf der Seite fahren. Auf diese Weise wird viel weniger Code erstellt. Ich habe dies verwendet, weil ich Leerzeichen zwischen Divs in einem Popup hatte und das Popup nur schließen wollte, wenn ich mich aus dem Popup entfernte, nicht wenn ich meine Maus über die Leerzeichen im Popup bewegte. Also habe ich eine Mouseover-Funktion für das Inhalts-Div aufgerufen (bei der das Popup beendet war), aber sie hat die Schließfunktion nur ausgelöst, wenn ich mit der Maus über das Inhalts-Div gefahren bin UND mich außerhalb des Popups befand!

$ (". Popup"). Mouseover (Funktion (e)
    {
    $ (this) .addClass ("over");
    });

$ (". Popup"). mouseout (Funktion (e)
    {
    $ (this) .removeClass ("over");
    });


$ ("# mainContent"). mouseover (Funktion (e) {
            if (! $ (". erweitert"). hasClass ("over")) {
            Drupal.dhtmlMenu.toggleMenu ($ (". Erweitert"));
        }}
    });

Dies wäre der einfachste Weg, dies zu tun!

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

Hier ist eine Technik, die nicht auf jquery basiert und die native DOM- matches API verwendet . Es verwendet Herstellerpräfixe, um Browser zu unterstützen, die auf IE9 zurückgehen. Siehe matchesselector auf caniuse.com .

Erstellen Sie zuerst die matchSelector-Funktion wie folgt:

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);

Dann, um Schwebeflug zu erkennen:

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

Ich habe dies in einer anderen Frage mit allen Details beantwortet, die Sie möglicherweise benötigen:

Erkennen Sie, wenn Sie mit jQuery über einem Element schweben (hat zum Zeitpunkt des Schreibens 99 positive Stimmen)

Grundsätzlich können Sie so etwas tun:

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

Dies funktioniert nur, wenn oiein jQuery-Objekt ein einzelnes Element enthält. Wenn mehrere Elemente übereinstimmen, müssen Sie sie auf jedes Element anwenden, zum Beispiel:

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

Dies wurde ab jQuery 1.7 getestet.

Hier ist eine Funktion, mit der Sie überprüfen können, ob sich die Maus in einem Element befindet oder nicht. Das einzige, was Sie tun sollten, ist, die Funktion aufzurufen, in der Sie ein Live-EventObject haben können, das der Maus zugeordnet ist. etwas wie das:

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

Sie können den Quellcode hier in Github oder am Ende des Beitrags sehen:

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;
    }
}

Verwenden Sie die jquery-Funktion .data (), um die Timeout-ID zu speichern, und erweitern Sie dabei die Aussagen von 'Happytime harry'. Auf diese Weise können Sie die Timeout-ID sehr einfach abrufen, wenn das 'Maus-Center' später für dasselbe Element ausgelöst wird, sodass Sie den Auslöser für das Verschwinden Ihres Tooltips entfernen können.

Sie können jQuerys Mouseenter- und Mouseleave-Ereignisse verwenden. Sie können eine Flagge setzen, wenn die Maus den gewünschten Bereich betritt, und die Flagge deaktivieren, wenn sie den Bereich verlässt.

Ich habe Ideen aus diesem Thema kombiniert und mir diese ausgedacht, die zum Ein- und Ausblenden eines Untermenüs nützlich ist:

$("#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");
 });

Scheint für mich zu arbeiten. Hoffe das hilft jemandem.

EDIT: Jetzt funktioniert die Realisierung dieses Ansatzes im IE nicht richtig.

Ich konnte keinen der obigen Vorschläge verwenden.
Warum bevorzuge ich meine Lösung?
Diese Methode prüft, ob sich die Maus zu einem von Ihnen ausgewählten Zeitpunkt über einem Element befindet .
Mouseenter und : Hover sind cool, aber Mouseenter wird nur ausgelöst, wenn Sie die Maus bewegen, nicht, wenn sich das Element unter der Maus bewegt.
: Schwebeflug ist ziemlich süß, aber ... IE

Also mache ich das:

Nein 1. Speichern Sie die x- und y-Position der Maus bei jeder Bewegung, wenn Sie sie benötigen.
Nein. 2. Überprüfen Sie, ob sich die Maus über einem der Elemente befindet, die mit der Abfrage übereinstimmen

// 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");
    }
});

Nur ein Hinweis zu der beliebten und hilfreichen Antwort von Arthur Goldsmith oben: Wenn Sie Ihre Maus im IE von einem Element zu einem anderen bewegen (zumindest bis IE 9), kann es schwierig sein, diese Funktion ordnungsgemäß auszuführen, wenn das neue Element eine hat transparenter Hintergrund (was standardmäßig der Fall wäre). Meine Problemumgehung bestand darin, dem neuen Element ein transparentes Hintergrundbild zu geben.

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

GEIGE

Sie können verwenden is(':visible'); in jquery verwenden. Und für $ ('. Item: hover') funktioniert es auch in Jquery.

Dies ist ein HTML-Code-Snnipet:

    <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>

und das ist der JS-Code:

$('.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');

});

das, worüber ich gesprochen habe :)