Question

I’ve created an example of the problem here:

http://jsfiddle.net/jXLSW/

Notice that when you hover over the image a div shows up at the top of the image. When you leave the image, it goes away. The problem is when you move your mouse over the div at the top. It goes into this show/hide cycle because the mouse is entering/leaving.

This div that shows up at the top is going to contain icons that act as a toolbar. How can I keep the toolbar visible when I hover over it? More importantly, how can I get the hover event to stop cycling?

UPDATE: The interesting thing is the following code works as desired. The problem is that there seem to be livequery issues in that often times, it doesn’t actually kick in. Therefore, no div shows up, which is a major problem as well.

$('.has-menu').livequery(function() {
  $(this).hover(function() {$(this).find('div.img-menu').slideToggle();}, function() {$(this).find('div.img-menu').slideToggle();});
});

Answer 1

Well, I changed the code to this:

$('.has-menu').live('hover', function(e) {
    if (e.type == 'mouseover') {
        $(this).find('div.img-menu').slideToggle();
    }else{
        $(this).find('div.img-menu').slideToggle();  
    }
});

and now all is well.