Question

我正在尝试创建一个简单的菜单，当用户将鼠标悬停在顶部栏上的按钮上时，该菜单会启动。菜单在容器div中显示（使用onmouseover事件激活块显示）。但是，当用户将鼠标悬停在容器内的菜单项列表上时，div就会消失。 HTML结构如下：

<div id="menu-contaier" onmouseout="hideMenu();">
        <div id="lvl1"></div>
        <div id="lvl2"></div>
        <div id="lvl3"></div>
</div>

就我的想法而言，我认为这是因为当鼠标触及“lvl1”（或lvl2或lvl3）id时，它会退出“menu-container”div。我试图将它嵌套在另一个div中，但也没有用。

理想情况下，HTML结构如下所示：

<div id="menu-contaier" onmouseout="hideMenu();">
        <div id="lvl1"><ul><li onmouseover="presentForLevel2(3, 'lvl2');">Windows</li><li onmouseover="presentForLevel2(4, 'lvl2');">Tables</li></ul></div>
        <div id="lvl2"></div>
        <div id="lvl3"></div>
</div>

在悬停时，'presentForLevel2（）'函数将填充未发生的lvl2 div。

Answer 1

发生这种情况是因为当您将鼠标移出任何'lvl'div时，mouseout事件会冒泡并在父div上触发。要防止这种情况，请在子div上设置mouseout事件处理程序并停止冒泡。这是一个演示：http://jsfiddle.net/ESBYw/

如何防止onmouseover事件为其父级激活onmouseout事件？

1 个答案: