jQuery mouseout doesn't count link as part of the DIV?

Question

I'm sorry if this has been answered but I couldn't find the answer..

What I have is a DIV with some links in it. And what I want it to do is to show while the mouse is on it but fade out when the mouse leaves it (the DIV). The only problem is that the DIV fades out as soon as the mouse hits the links inside it. So is there a way to make it realise that the links are also part of the DIV or what's the best solution?

This is the current code:

jQuery

$("#hoverbox").mouseover(function() {
    $("#hoverbox").fadeOut();
    $("#sub-menu").fadeIn("slow");
});

$('#sub-menu').mouseout(function() {
  $("#sub-menu").fadeOut();
  $("#hoverbox").fadeIn();
});

HTML

<div id="sub-menu">
<a href="test.html">test</a>
</div>
<div id="hoverbox"></div>

I can't be the only one having this problem, so I've most likely missed something very basic here.

Answer 1

The problem is you are using the wrong event, you want to use mouseleave instead of mouseout, take a look at the following list of events that you can use:

mouseenter / mouseout
mouseover / mouseleave

You've already learned the difference between both pairs (including or not inner elements) and you were mixing from the two groups.

So you just need to change your following line:

$('#sub-menu').mouseout(function() {

for this one:

$('#sub-menu').mouseleave(function() {

See working demo .

Answer 2

is this close to what you were wanting?

$("#hoverbox").mouseenter(function() {
    $("#hoverbox").hide("slow");
    $("#sub-menu").show("fast");
});

$('#sub-menu').mouseleave(function() {
   $("#sub-menu").hide();
   $("#hoverbox").show();
});​

demo is here: http://jsfiddle.net/UTaFL/

using mouseenter and mouseleave is better here as they ignore child elements and look only for the mouse entering/leaving the bounds of the specified element.

I also changed the fadeIn and fadeOut as they can cause problems as they are able to call the mouseenter and mouseleave (as well as mouseover and mouseout) events before they are actually visible on the page.