Ich führe ein on mouseenter / mouseleave mit jQuery durch und es scheint zu funktionieren, aber nicht, wenn ich das div verlasse. Dies funktioniert nur, wenn ich das eigentliche Fenster verlasse.
Das ist meine jQuery
%Vor%Dies ist mein HTML
%Vor%Ich habe hier eine Geige gemacht. Ich lerne jQuery, also wird Rat geschätzt.
Ihre Funktion funktioniert perfekt! Das Problem ist die Überlagerung. Du platzierst das Absolute und lässt es den ganzen Körper bedecken. Also ändere dein CSS ein wenig, place .pods und .col relativ.
Das einzige, was ich an Ihrer Funktion ändern würde, ist, beide Ereignisse an denselben Aufrufer zu binden:
%Vor% Ihre Methode ist in Ordnung, aber Sie funktioniert nicht auf mouseleave ist, weil das Overlay über .col und somit mouseleave nie ausgelöst wird. Sie können pointer-events auch verwenden, abgesehen von den anderen Antworten. So etwas Ähnliches
Hier ist die aktualisierte Demo Ссылка
PS: Ich habe den Rand der Überlagerung nur geändert, um die Überlagerungsgrenzen anzuzeigen.
Sie können auch hover event wie folgt verwenden:
Und dies ist das Hover-Ereignisdokument
Das Problem ist jedoch nicht die Funktion, sondern das CSS, das der Klasse pod-overlay zugeordnet ist.
Fügen Sie diese zwei Attribute in Ihrem CSS hinzu:
Lernen jquery, so wird Rat geschätzt.
jQuery wird nicht benötigt, um die Anforderung zu erfüllen. Verwenden Sie css pseudoklasse :hover
jsfiddle Ссылка
Das eigentliche Mausereignis, das Sie aufrufen sollten, ist onmouseout
%Vor%Tags und Links jquery mouseleave