javascript下拉菜单问题

Question

我正在尝试使用 javascript/jquery 制作一个下拉菜单，但无法理解某些内容。

当您将鼠标悬停在菜单项上时，它需要在其下方显示一个包含另一个菜单的 div，其方式与许多 javascript 菜单类似。

我遇到的问题是，当您将鼠标移出菜单项时，div 需要消失，除非您已将鼠标移到 div 上，在这种情况下，div 需要保留在那里，直到您滚下它。

问题是菜单项的 mouseout 事件在 div 的 mouseover 事件之前触发。

我想我想说的是，只有当您将鼠标移出覆盖菜单和 div 的区域时，div 才会消失。

这对任何人都有意义吗？ (代码如下)

<ul id="menu">
    <li class="item1"><a href="#"></a></li>
    <li class="item2">
        <a href="#"></a>
        <div class="dropDownMenu">
            <div><a href="#">Sub-item 1</a></div>
            <div><a href="#">Sub-item 2</a></div>
            <div><a href="#">Sub-item 3</a></div>
        </div>
    </li>
    <li class="item3"><a href="#"></a></li>
</ul>


$('#menu LI > A').mouseover(function(){

    $(this).find('dropDownMenu').show();

});
$('#menu LI > A').mouseout(function(){

    $(this).find('dropDownMenu').hide();

    ^^^ Only do this if the user hasn't moved on to the drop down menu.

});

Answer 1

您可以使用mouseenter而不是鼠标悬停。