Javascript 和 HTML：让 onmouseover 为 div 不在前台工作？答案

【问题标题】：Javascript & HTML: Make onmouseover work for div NOT in foreground?Javascript 和 HTML：让 onmouseover 为 div 不在前台工作？
【发布时间】：2014-05-21 00:07:00
【问题描述】：

我有一个以这种方式排列的 div 集合：

<div id="main">
   <div id="background"></div>
   <div id="foreground">
       <div id="foreground_element1></div>
       <div id="foreground_element2></div>
   </div>
</div>

背景 div 必须在前景 div 之后。并且背景 div 比前景大；前景漂浮在它上面。我想要做的是每当背景 div 有 onmouseover 动作时，我想运行我的 JavaScript 函数。

我遇到的问题是，如果鼠标位于前景区域，则不会发出 onmouseover 信号，即使背景 div 仍然存在于该空间中，它就在前景的后面。这是一个问题。

我试图通过将我想要的函数放在主 div mouseover 上来解决它，但是当鼠标从背景 div 移动到前景 div 时，会同时调用一个 mouseout 和 mouseover 事件，这使我的函数运行当我只希望它运行一次时两次。而且还有更多的复杂性，因为前景 div 也有嵌套元素，这再次触发了 mouseout 和 mouseover 组合。

有什么方法可以让 onmouseover 为整个背景 div 工作？还是我应该使用其他触发器？

【问题讨论】：

onmouseenter，但要确保你要支持的浏览器已经实现了它
你不能让#foreground 成为#background 的子节点吗？然后将其定位在绝对位置而不是浮动位置。
我不认为 onmouseenter 会是一个好的解决方案，因为它不与微软以外的任何浏览器正式兼容。我可以尝试让前景成为一个孩子，但如果可能的话我不希望这样做

标签： javascript jquery html onmouseover

【解决方案1】：

其实我很幸运在网上找到了我自己问题的答案 :) 在这里发布以供其他人参考：

正如上面 cmets 中提到的那样，Microsoft 函数 onMouseEnter 可以满足我的需求。问题是它没有被其他浏览器广泛支持。但是您可以编写一个 JavaScript 函数来模拟它，如下所述：http://dynamic-tools.net/toolbox/isMouseLeaveOrEnter/

【讨论】：