文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过悬停第一个div来显示/隐藏第二个div？

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

Stack Overflow用户

提问于 2014-09-26 20:11:47

回答 1查看 357关注 0票数 0

下面的代码运行良好，但有一个小问题我无法修复。

当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

感谢您的关注！

mouseover

show-hide

mouseout

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-26 20:14:59

将#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。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26067605

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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