How to disable mouseout events triggered by child elements?

Question

Let me describe the problem in details:

I want to show an absolute positioned div when hovering over an element. That\'s really simple with jQuery and works just fin

Answer 1

The question is a bit old, but I ran into this the other day.

The simplest way to do this with recent versions of jQuery is to use the mouseenter and mouseleave events rather than mouseover and mouseout.

You can test the behavior quickly with:

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

Answer 2

The way I've usually seen this handled is to have a delay of about 1/2 second between moving the mouse from the HoverMe element. When moving the mouse into the hovered element, you would want to set some variable which signals that you are hovering over element, and then basically stop the hovered part from hiding if this variable is set. You then have to add a similar hide function OnMouseOut from the hovered element to make it disappear when you remove the mouse. Sorry I can't give you any code, or something more concrete, but I hope this points you in the right direction.

Answer 3

You are looking for the jQuery equivalent of javascript's prevent event bubbling.

Check this out:

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

Basically you need to catch the event in the children DOM nodes, and there stop their propagation up the DOM tree. Another way, although really not suggested (as it can severely mess with existing events on your page), is to set event capture to a specific element on the page, and it will receive all the events. This is useful for DnD behavior and such, but definitely not for your case.

Answer 4

I agree with Ryan.

Your problem is that the "next" div is not a "child" of A. There's no way for HTML or jQuery to know that your "a" element is related to the child div in the DOM. Wrapping them and putting a hover on the wrapper means that they are associated.

Please note that his code isn't in line with best practices, though. Don't set the hidden style inline on the elements; if the user has CSS but not javascript, the element will hide and will not be able to be shown. Better practice is to put that declaration in the document.ready event.

Answer 5

Yeap, guys, use .mouseleave instead of .mouseout:

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

Or even use it in combination with live:

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});

Answer 6

I resolved this problem by adding pointer-events: none; on my child elements css