Mousemove animate sur hover

Question

Je veux faire un survol d'animation sur un div. Mais ça ne marche pas, quand ma souris est en dehors de la div, l'animation ne fonctionne pas. Pourquoi ?

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

Il y a plusieurs correctifs, vous devez appliquer:

1. Retirer 3ème fonction de hover rappel, car il ne dispose que de deux paramètres: Jquery Hover
2. mise à jour toutes les propriétés dans chacun des gestionnaires: opacity, height, width
3. Ajoutez le style pointer-events: none à votre span élément, pour éviter d'appeler hoverOut lorsque votre souris sous le span.

Regardez l'exemple pour plus de détails: JSFiddle example