让我详细描述一下问题：
我想在悬停在元素上时显示绝对定位的 div。这对 jQuery 来说真的很简单，而且工作得很好。但是当鼠标经过其中一个子元素时，它会触发包含 div 的 mouseout 事件。悬停子元素时，如何防止 javascript 触发包含元素的 mouseout 事件。
用 jQuery 做到这一点的最好和最短的方法是什么？
这是一个简单的例子来说明我的意思：
网址：
<a>Hover Me</a>
<div>
<input>Test</input>
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
Javascript/jQuery：
$('a').hover( function() { $(this).next().show() }
function() { $(this).next().hide() } );
这个问题有点老了，但前几天我遇到了这个问题。
使用最新版本的 jQuery 执行此操作的最简单方法是使用mouseenterandmouseleave事件而不是mouseoverand mouseout。
您可以通过以下方式快速测试行为：
$(".myClass").on( {
'mouseenter':function() { console.log("enter"); },
'mouseleave':function() { console.log("leave"); }
});
为简单起见，我将稍微重新组织一下 html，将新显示的内容放在 mouseover 事件绑定到的元素中：
<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>
然后，您可以执行以下操作：
$('#hoverable').hover( function() { $(this).find("div").show(); },
function() { $(this).find("div").hide(); } );
注意：我不推荐内联 css，但这样做是为了使示例更易于理解。
是的，伙计们，使用.mouseleave代替.mouseout：
$('div.sort-selector').mouseleave(function() {
$(this).hide();
});
或者甚至结合使用它live：
$('div.sort-selector').live('mouseleave', function() {
$(this).hide();
});
您正在寻找等效于 javascript 的防止事件冒泡的 jQuery。
看一下这个：
http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29
基本上，您需要在子 DOM 节点中捕获事件，然后停止它们在 DOM 树中的传播。另一种方法，虽然真的不建议（因为它会严重干扰页面上的现有事件），但是将事件捕获设置为页面上的特定元素，它将接收所有事件。这对于 DnD 行为等很有用，但绝对不适用于您的情况。
我只是检查鼠标坐标是否在 mouseout-event 中的元素之外。
它可以工作，但对于这么简单的事情，它有很多代码:(
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
}
}
代码为了可读性而减少，不能开箱即用。