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不是典型的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');
});

继承悬停“Mouseleave”不起作用

3 个答案: