Mousemove animieren auf Hover

Question

Ich möchte eine Animation auf einem div schweben. Aber es funktioniert nicht, wenn meine Maus außerhalb der Div ist, funktioniert die Animation nicht. Warum ?

https://jsfiddle.net/udn5b9fd/

$(document).mousemove(function(e){ 
$("span").css({left:e.pageX - 50, top:e.pageY - 50}); 
}); 


$("div").hover(

    function() { 
    $("span").stop().animate({"height": "100px", "width": "100px"}, 200); 
    }, 
    function() { 
    $(this).stop().animate({"opacity": "0.5"}, 0); 
    }, 
    function() { 
    $(this).stop().animate({"opacity": "1"}, 0); 

}); 

Answer 1

Es gibt mehrere Fehlerbehebungen, sollten Sie sich bewerben:

1. entfernen 3. Funktion von hover Rückruf, da es nur zwei Parameter: Jquery Hover
2. aktualisieren alle Eigenschaften in jedem der Handler: opacity, height, width
3. Fügen Sie pointer-events: none Stil zu Ihrem span Element, um zu verhindern, hoverOut aufrufen, wenn Ihre Maus unter der span.

Schauen Sie sich das Beispiel für weitere Informationen: JSFiddle example