Search code examples
jqueryhtmlhyperlinkmouseovermouseout

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

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.

Solution

  • 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 .