13 回答
You should be able to detect if the situation is the one you want just with the values off the event. It is a little convoluted but it seems to work.
In the event handler of your outer div, do something like this:
<div onmouseover="if (isReal()) { toggle(); }"
onmouseout="if (isReal()) { toggle(); }">
</div>
Then implement the isReal method:
function isReal() {
var evt = window.event;
if (!evt) {
return true;
}
var el;
if (evt.type === "mouseout") {
el = evt.toElement;
} else if (evt.type === "mouseover") {
el = evt.fromElement;
}
if (!el) {
return false;
}
while (el) {
if (el === evt.srcElement) {
return false;
}
el = el.parentNode;
}
return true;
}
Basically the isReal method just detects if the event was coming from within the div. If so, then it returns false which avoids calling the hide toggle.
我的建议是在选择框有焦点时设置另一个标志。设置标志时不要关闭 div。
好吧，这种行为的原因是因为 mouseover/out 事件冒泡，这实际上意味着每当您将鼠标悬停在弹出窗口内的任何元素上时，弹出窗口也会收到该事件。
您可以在此处阅读有关这些事件的更多信息，以及有关事件冒泡的信息。
您在这里有 3 种可能的解决方案：
将事件更改为 onmouseenter/leave。你已经提到这没有帮助，这听起来很奇怪，因为这些不应该冒泡。
在事件中检查 srcElement 与 from/toElement 的关系。
McKAMEY检查的改进版本是：
function isReal() {
var evt = window.event;
if (!evt) {
return true;
}
var el;
if (evt.type === "mouseout") {
el = evt.toElement;
} else if (evt.type === "mouseover") {
el = evt.fromElement;
}
if (!el) {
return false;
}
// this will also return true if el == evt.srcElement
return evt.srcElement.contains(el);
}
做同样的事情，只是更短。
3. 另一种选择是在弹出窗口下方创建一个透明、不可见的 div，该 div 覆盖了选择框下拉到的区域。我假设它落在弹出窗口的实际区域之外。
希望这可以帮助！
您是否尝试过hover代替鼠标悬停/移出效果？
$(".myDiv").hover(function(){
$(this).show();
}, function {
$(this).hide();
});
为什么有mouseover / mouseout <div>？为什么不只是<div>在鼠标上显示，然后设置<body onmouseover="hidedivs();"> 我不知道这是否可行，但如果在<div>身体顶部，那么<div>应该保持可见。
许多发布解决方案/示例的人似乎没有意识到一件事：onmouseout 事件在<div>onmouseover 事件 on 之前发生火灾<select>。
当<div>失去焦点（onmouseout）时，不要立即关闭它，而是在 500 毫秒之后。如果在此期间<select>获得焦点（鼠标悬停），则根本不关闭<div>（clearTimeout）。
另外，尝试使用事件传播/冒泡。
在 div 的 mouseout 事件中，为 div 元素添加一个超时，这将在 200 毫秒左右隐藏 div。
然后在 div/select 的 mouseover 事件和 select 的 click 事件中清除存储在 div 元素中的超时。
在隐藏允许鼠标悬停或单击事件在执行之前清除超时的 div 之前，这会产生非常轻微的延迟。它不漂亮，但应该可以。
<options>当鼠标悬停在s 上时，如何通过 s 的mouseover事件重新显示 div <options>。
编辑：尽管选项的鼠标悬停和 div 的鼠标悬停的执行顺序可能会导致问题。
鉴于 IE 中的选择很痛苦，尤其是当涉及到选择出现在 div 上方的整个分层问题时，即使它不应该出现，我可以为您指出 YUI 的菜单按钮控件的方向。它们看起来非常好，易于实施并且不会导致此问题
这是一个链接：http: //developer.yahoo.com/yui/examples/button/btn_example07.html
您应该使用event.stopPropagation()while in<select>或cancelBubble()in<select>元素本身。
您可以尝试专门为选项列表添加另一个鼠标悬停事件。
而不是使用mouseout作为关闭div的事件，使用mouseleave，那么该事件只会在指针离开div的边界时触发，而不是当它移动到其中的其他元素时
像这样的东西怎么样：
<div id="trigger">
Hover over me!
</div>
<div class="container">
<select>
<option>Blah</option>
<option>Blah</option>
</select>
</div>
$("#trigger").mouseover(function(){
$('.container).show();
});
$(".container").mouseleave(function(){
$(this).hide();
});
基本思想是当您将鼠标悬停在触发器上时显示容器元素，然后当您离开容器时隐藏容器。您需要定位容器，使其夹住触发元素，否则它会立即隐藏。