Mouseleave not for child divs

Question

This is probably very easy, but I can't figure it out for the moment being.

I have html like this:

<div class="current-colors">
    <div class="boxes">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

The <div class="boxes"> is display as block.

Current jQuery - when user moves from the div-containter with class boxes:

$(".current-colors").on('mouseout', '.boxes', function(){
    $(".filter-menu .current-colors .boxes").hide();
});

the <div class="boxes"> are hidden and that is correct.

But my issue is that when user moves to <div class="item"> the <div class="boxes"> is hidden as well. I don't want that. I want the <div class="boxes"> to be hidden ONLY when leaving "outside" and not leaving to any child divs. How do I achieve that?

Answer 1

You need to use the mouseleave event instead of mouseout

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

$(".current-colors").on('mouseleave', '.boxes', function(){
    $(this).hide();
    //$(".filter-menu .current-colors .boxes").hide();
});

Demo: Fiddle

Answer 2

If you want to learn jquery not() event, look at this fiddle : http://jsfiddle.net/mehmetakifalp/YXTAz/

$("#list li").not(".one").css("border-bottom","1px solid #000");

<ul id="list">
 <li class="one">Item A</li>
 <li class="two">Item B</li>
 <li class="three">Item C</li>
</ul>