Question

I’ve spent awhile now reading the various other postings of jQuery hover issues, and trying different things to get my jQuery hover functions to work properly to no avail.

What I’m trying to accomplish

I want to hide/show a div within an li element with jQuery’s hover event.

What’s happening

The div hides/shows properly, but if the mouse is moved very quickly from one li element to the next, sometimes the hide (mouseleave) seems to not be getting executed. This leaves the div that is supposed to be hidden visible.

Demo

http://jsfiddle.net/vJPNT/11/

In the demo, you will see this effect. A div containing the link “Delete” appears as the mouse rolls over the li element, but if the mouse quickly jumps to the next li element, it does not always disappear.

Please let me know if any extra information is needed. Thanks.

Answer 1

I added console.log($(e.target)) to your two functions. It seems like some times e.target is one of the divs inside the li elements. This is probably because you catch a propagated hover event.

By changing $(e.target) to $(this) you should be fine.

function updateIn(e) {
    $(this).find('.actions').show();                
    console.log($(e.target));
}

function updateOut(e) {
    $(this).find('.actions').hide();  
    console.log($(e.target));
}

$('li.update').hover(updateIn, updateOut);
$('li.update .actions').hide();