0

ユーザーがカーソルを「ログイントリガー」の上に置いたときに表示されるドロップダウンログインボックスがあります。これは単なる画像です。ドロップダウンが表示されたら、「login-box」要素 (ドロップダウン) を消えることなくホバーできるようにしたいと考えています。これが現在起こっていることです。トリガーとドロップダウン自体の両方にカーソルを合わせたときに表示されたままにし、カーソルがこれらの要素のいずれかにカーソルを合わせていないときにのみ消えるようにする方法はありますか?

<script>
    $(function() {
        $("#login-trigger").hover(function() {
            $("#login-box").slideToggle("slow");
        });
    });
</script>
4

2 に答える 2

1

簡単な解決策は、要素を共通のコンテナーにネストし、マウス イベントをそのコンテナーにアタッチすることです。

<div id="container">
    <img id="login-trigger" src="image.png" />
    <div id="login-box">
         <!-- login stuff -->
    </div>
</div>

CSSを使用するだけです：

#container #login-box {display:none;}
#container:hover #login-box {display:block;}

またはJavaScript

$('#container').on('mouseenter mouseleave', function(e) {
    $('#login-box')[e.type=='mouseenter'?'slideDown':'slideUp']('slow');
});

それが不可能な場合は、トリガーとボックスの両方でタイムアウトとイベント ハンドラーを使用する必要がありますが、これはかなり複雑です。

$('#login-trigger, #login-box').on({
    mouseenter: function(e) {
        if (e.target.id == 'login-trigger') $('#login-box').slideDown('slow');
        clearTimeout( $('#login-box').data('timer') );
    },
    mouseleave: function() {
        $('#login-box').data('timer', 
            setTimeout(function() {
                $('#login-box').slideUp('slow')
            }, 300)
        );
    }
});

フィドル

于 2013-09-27T17:23:53.137 に答える
0

#login-boxで簡単に追加できます#login-trigger。

次に、あなたがホバーになるとき#login-box、あなたもホバーになります#login-trigger

于 2013-09-27T17:10:19.487 に答える