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);
}
Antworten:
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.
quelle
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.
quelle
Ein sauberer und eleganter Hover Check:
quelle
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:
quelle
:hover
ist kein gültiger jQuery-Selektor: api.jquery.com/category/selectors (Quelle: bugs.jquery.com/ticket/11574 )document.querySelectorAll(':hover')
Sie können das
hover
Ereignis von jQuery verwenden , um den Überblick manuell zu behalten:quelle
$.data
beinhaltet keine String-Manipulation.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.
Dann rufen Sie es an einer beliebigen Stelle des Dokuments so auf und es gibt true oder false zurück:
Ich habe es auf IE7 +, Chrome 1+ und Firefox 4 getestet und funktioniert ordnungsgemäß.
quelle
In jQuery können Sie also .is (': hover') verwenden
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):quelle
$(':hover')
es in IE8 funktioniert. Es ist ein gültiger CSS2-Pseudo-Selektor, also sollte es funktionieren.Ich nahm die Idee von SLaks und wickelte sie in eine kleine Klasse ein .
quelle
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:
Wie ich bereits erwähnt habe, hat es auch viele andere Verwendungszwecke, wie Sie in der sehen können
jsFiddle hier gefunden
quelle
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
wird in der Tat als jQuery 1.8 hier der Status von der jQuery-Website verworfen:
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.
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
quelle
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:
Und damit diese Arbeit an einem Text funktioniert, muss ich nur Folgendes tun:
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.
quelle
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?:
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.
quelle
Sie können testen,
jQuery
ob 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!quelle
Dies wäre der einfachste Weg, dies zu tun!
quelle
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:
Dann, um Schwebeflug zu erkennen:
quelle
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:
Dies funktioniert nur, wenn
oi
ein jQuery-Objekt ein einzelnes Element enthält. Wenn mehrere Elemente übereinstimmen, müssen Sie sie auf jedes Element anwenden, zum Beispiel:Dies wurde ab jQuery 1.7 getestet.
quelle
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:
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
quelle
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.
quelle
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.
quelle
Ich habe Ideen aus diesem Thema kombiniert und mir diese ausgedacht, die zum Ein- und Ausblenden eines Untermenüs nützlich ist:
Scheint für mich zu arbeiten. Hoffe das hilft jemandem.
EDIT: Jetzt funktioniert die Realisierung dieses Ansatzes im IE nicht richtig.
quelle
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
quelle
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.
quelle
GEIGE
quelle
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:
und das ist der JS-Code:
das, worüber ich gesprochen habe :)
quelle