jquery - 継承されたホバー「Mouseleave」が機能しない

Question

ホバー時に次のような継承されたイベントがあります。

$('#menu').on("hover", '#menu li', function() {    
//mouse over LI and look for A element for transition
$(this).find('img')
    .animate( { opacity:1 }, 200)
});

継承されたすべての要素に対して機能しますが、「mouseleave」イベントを継承させることはできません。追加した場合：

    $('#menu').on("hover", '#menu li', function() {    
    //mouse over LI and look for A element for transition
    $(this).find('img')
        .animate( { opacity:1 }, 200)
},
function() {
    $(this).find('img')
        .animate( { opacity:0.5 }, 200)
});

動作しません。ホバーオンリーブイベントではどのように機能しますか？

Answer 1

hover典型的なjavascriptイベントではないので、バインディングをmouseenterイベントに分割する必要がありますmouseleave。

$('#menu').on("mouseenter", '#menu li', function() {    
    //mouse over LI and look for A element for transition
    $(this).find('img').animate( { opacity:1 }, 200)
});

$('#menu').on("mouseleave", '#menu li', function() {
    $(this).find('img').animate( { opacity:0.5 }, 200)
});

http://api.jquery.com/hover/を参照してください

Answer 2

$("#menu").on('mouseenter','#menu li', function(){

    $(this).find('img')
        .animate( { opacity:1 }, 200)
     })
.on('mouseleave','#menu li', function(){
$(this).find('img')
        .animate( { opacity:0.5 }, 200) 

});

Answer 3

$('#menu').on("mouseover", '#menu li', function() {    
    alert('mouse entered');
});

$('#menu').on("mouseleave", '#menu li', function() {    
   alert('mouse left');
});