Question

Imagine the following scenario: You have a menu with several items (a wordpress menu btw), and below that you would like to display a white bar with some links, but only when you hover over one particular menu item. Then, when you leave the menu item and hover over the white bar itself, which is right below the menu, it should still be there, because you want to be able to click the links inside it. The white bar should only fade out again when the mouse neither hovers over the menu item, nor over the white bar itself or any of the contained elements.

Here is what I have come up with:

$("#menu-item-62").hover(function(){ //this is the menu item
    $(".white_bar_artists").show(); //this is the white bar that shall be shown
}, function(){
    if(!$(".white_bar_artists").is(":hover")){ //the white bar should only disappear, if the user hovers neither over it nor the menu item
        $(".white_bar_artists").hide();
    }
});

So far, so good. The only problem is, the white bar only disappears again when I hover out of the menu item, not when I hover out of the white bar itself. This is why I added the following code:

$(".white_bar_artists").find("*").mouseout(function(){
    $(".white_bar_artists").hide();
    $(".white_bar").show();
});

Interestingly, even though I use find("*") to retrieve all elements inside the white bar, as soon as I hover over one of them, the white bar disappears. Still, this second bunch of code seems to be necessary to make the white bar disappear not only when hovering out of the menu item.

How can I improve either code snippet so that it meets the following two requirements:

• The white bar stays when hovering over the menu item and the white bar itself
• The white bar disappears when not hovering over itself, one of the contained elements, and the menu item

Answer 1

Bind the hover actions to the white bar too. The menu item loses hover triggering hide, but the white bar has a hover by that time triggering show.

$("#menu-item-62, .white_bar_artists").hover(function(){
    $(".white_bar_artists").show(); //this is the white bar that shall be shown
}, function(){
    $(".white_bar_artists").hide();
});​

I’m assuming you have the two elements displayed so the mouse can go from one to the other with no gap.