Question

我试图简单地从导航div隐藏开始，然后在鼠标悬停在它们上面时显示它们。

我尝试过使用带有.show（）和.hide以及.toggle的.hover函数。我还尝试了使用show和hide以及切换功能的mouseeneter和mouseleave功能。

非常奇怪的是我可以反过来做一些工作。我可以让它隐藏在鼠标上并在鼠标退出时显示，虽然它在鼠标位于div内时闪烁。

这是html和jQuery：

<html>

<head><title>Divs</title>

    <link rel="stylesheet" type="text/css" href="reset.css" />

    <link rel="stylesheet" type="text/css" href="divs.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

    <script type="text/javascript">



        $(document).ready(function () {

            $("div.nav").mouseenter(function(e) {
                e.stopPropagation();
                $(this).show();
            }).mouseleave(function(e) {
                e.stopPropagation();
                $(this).hide();
            });

        });

    </script>

</head>


<body>


    <div id="mask">

        <div id="leftNav" class="nav"></div>

        <div id="rightNav" class="nav"></div>

    </div>


</body>

</html>

这是我尝试用于.hover函数的代码：

$("div.nav").hover(function() {
                $(this).toggle();
            }, function() {
                $(this).toggle();
            });

这是CSS：

div#mask {
    position:relative;
    width:100%;
    height:100%;
    background-color:#4b4747;
}

div.nav {
    display:none;
}

div#leftNav {
    background-color:red;
    width:10%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:8000;
}

div#rightNav {
    background-color:red;
    width:10%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
}

div#pictures {
    display:none;
}

我尝试过各种方法的多种变体。我在这里缺少什么？

Answer 1

您不能在.hover()元素上使用display: none或其他鼠标相关事件，这是.hide()元素设置的内容以及CSS最初将其设置为。此类元素不会接收鼠标事件，因此您永远不会获得初始.hover()或其他鼠标事件事件。

您可以更改逻辑以将不透明度淡化为零而不是隐藏它们。这将使它们不可见，但它们仍将接收鼠标事件。

更改为：

div.nav {
    opacity: 0;
}

和

    $(document).ready(function () {

        $("div.nav").hover(function(e) {
            e.stopPropagation();
            $(this).animate({opacity: 1});
        }, function(e) {
            e.stopPropagation();
            $(this).animate({opacity: 0});
        });

    });

使用不透明度和使用hide / show之间的主要区别在于，当设置不透明度时，元素仍会占用页面中的空间（这就是为什么它仍然可以接收事件），但是当你隐藏（）它时，它将不再占用页面中的任何空间（这就是它不接收任何鼠标事件的原因）。

Answer 2

请为其他元素设置MouseEnter事件因为leftnav和rightnav第一次显示无并且你不能为这个

重新设置MouseEnter

jQuery show函数不起作用

2 个答案: