0

nav divを非表示にしてから、マウスがそれらの上にあるときにそれらを表示しようとしています。

.show() および .hide および .toggle で .hover 関数を使用してみました。また、表示と非表示、およびトグル機能を使用して、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

要素が設定されている要素と、CSS が最初に設定し.hover()た要素に対して、またはその他のマウス関連のイベントを使用することはできません。このような要素はマウス イベントを受信しないため、初期またはその他のマウス イベント イベントを取得することはありません。display: none.hide().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() すると、要素はもはやページ内の任意のスペースを占有します (これが、マウス イベントを受信しない理由です)。

于 2012-07-21T05:23:42.547 に答える
1

leftnavとrightnavが初めて表示され、MouseEnterを起動できない場合は、他の要素のMouseEnterイベントを設定してください。

于 2012-07-21T05:33:46.340 に答える