如何通过悬停第一个 div 来显示/隐藏第二个 div？答案

【问题标题】：How to show / hide the second div by hovering the first one?如何通过悬停第一个 div 来显示/隐藏第二个 div？
【发布时间】：2014-09-26 20:11:47
【问题描述】：

以下代码运行良好，但有一个小问题我无法解决。

当 div2 显示时，通过在其包含的链接内移动鼠标指针（从一个链接到另一个链接），它会被隐藏。

出了什么问题以及如何解决？

<html>
<body>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

    <div>
        <span id="div1">User Name</span>
        <section id="div2">
            <a id="lnkLogin" href="#">Link 1</a>
            <a id="lnkStatus" href="#">Link 2</a>
        </section>
    </div>
    <script>
        $(function () {
            jQuery('#div2').hide(); jQuery('#div1').mouseover(function () {
                jQuery('#div2').fadeIn();
            });
            jQuery('#div2').mouseout(function () {
                jQuery('#div2').fadeOut();
            });
        });
    </script>
</body>
</html>

Fiddle

感谢您的关注！

【问题讨论】：

只需将.mouseout 替换为.mouseleave：updated fiddle。
@Regent：我替换了它们但没有用！

标签： jquery mouseover show-hide mouseout

【解决方案1】：

将#div2 放入#div1：

<div> 
    <span id="div1">User Name
        <section id="div2"> 
            <a id="lnkLogin" href="#">Link 1</a>
            <a id="lnkStatus" href="#">Link 2</a>
        </section>
    </span>
</div>

Fiddle demo

请注意，我已更改为 mouseenter 和 mouseleave 以防止重复行为。我还建议使用语义 ID 值而不是元素类型值，这会在您的标记更改时变得不正确：#username、#userlinks

【讨论】：