jquery - 继承的悬停“鼠标离开”不起作用

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)
});

它不起作用。它如何用于悬停 onleave 事件？

Answer 1

hover is no typical javascript event, you have to split your binding in mouseenter and mouseleave event.

$('#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)
});

See 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');
});