0

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

我曾尝试将 .hover 函数与 .show() 和 .hide 以及 .toggle 一起使用。我还尝试了带有显示和隐藏以及切换功能的 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;
}

我尝试了每种方法的多种变体。我在这里想念什么？

4

2 回答 2

3

您不能在元素上使用.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});
        });

    });

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

于 2012-07-21T05:23:42.547 回答
1

please set the MouseEnter Event For Other Element becase leftnav and rightnav first time is display none and you can not riase MouseEnter For this

于 2012-07-21T05:33:46.340 回答