Question

I have an inherited event on hover that looks like this:

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

It works for all the inheritated elements, but I can’t make the “mouseleave” event to inherit. If I add:

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

It doesn’t work. How it works for the hover onleave event??

Answer 1

$("#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) 

});