Mousemoveがホバリングでアニメ化

Question

divにアニメーションホバーを作りたいです。 しかし、それは動作しません、私のマウスがdivの外にあるとき、アニメーションは機能しません。どうして ？

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

いくつかの修正がありますが、あなたが適用されるべきである：

1. それが唯一の2つのパラメータがあるので、hoverコールバックから3番目の機能を削除します。Jquery Hover
2. すべて更新各ハンドラのプロパティ：opacity, height, width
3. spanの下にマウスを置いたときにを呼び出すのを防ぐために、span要素にpointer-events: noneスタイルを追加します。

詳細は例を見て：JSFiddle example