如何禁用由子元素触发的鼠标出事件？

For simplicity sake, I would just reorganize the html a bit to put the newly displayed content inside the element that the mouseover event is bound to:

<div id="hoverable">
<a>Hover Me</a>
<div style="display:none;">
<input>Test</input>
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>

Then, you could do something like this:

$('#hoverable').hover( function() { $(this).find("div").show(); },
function() { $(this).find("div").hide(); } );

Note: I don't recommend inline css, but it was done to make the example easier to digest.

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.

I'm simply checking if the mouse-coordinates is outside the element in the mouseout-event.

It works but it's alot of code for such a simple thing :(

function mouseOut(e)
{
var pos = GetMousePositionInElement(e, element);
if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y)
{
RealMouseOut();
}
else
{
//Hit a child-element
}
}

Code cut down for readability, won't work out of the box.

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.

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.

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"); }
});

It's an old question, but it never gets obsolete. The correct answer should be the one given by bytebrite.

I would only like to point out the difference between mouseover/mouseout and mouseenter/mouseleave. You can read a great and helpful explanation here (go to the very bottom of the page for a working demo). When you use mouseout, the event stops when the mouse enters another element, even if it's a child element. On the other side, when you use mouseleave, the event is not triggered when the mouse overs a child element, and this is the behaviour the OP would like to achieve.

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();
});

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