0

マウスが .login-content の上に置かれたときに、login-btn がホバー状態のままになるようにします。私はすでにこれを試みましたが、今のところ、ホバー時にdivを表示および非表示にしますが、.login-contentがホバーされるとlogin-btnがホバー状態を失い、ホバーされると.login-contentが消えます。

更新:
現在の問題は、マウスをログインの上に置いてから直接離した場合..子要素の上に置くのではなく、.hovered スタイルが残ることです。このままではいけません。

HTML は次のとおりです。

               <li><a href="#" class="login-btn">Login</a>
                    <div class="login-content">
                        <form name="login-form" action="" method="post">
                            <input type="email" name="email" value="" placeholder="E-mail" />
                            <input type="password" name="password" value="" placeholder="Password" />
                            <input type="submit" name="login" value="Login" class="form-login" />
                        </form>
                    </div>
                </li>

jQuery コードは次のとおりです。

$(document).ready(function () {

$(".login-btn").hover(
   function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(".login-content").show();
        $(this).addClass('hovered');
    },
    function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(this).data('hoverTimeoutId', setTimeout(function () {

            $(this).removeClass('hovered');
            $(".login-content").hide();
        } ,500));
    });


$('.login-content').hover(
    function(){     
        clearTimeout($(".login-btn").data('hoverTimeoutId'));
    },     
    function(){    
        $(".login-content").hide();
        $(".login-btn").removeClass('hovered');
    });
});

さらにデバッグが必要な場合は、 Web ページをhttp://www.domainandseo.com/portfolio/1may/index.htmlで見つけることもできます。

ありがとう

4

3 に答える 3

2

試す

$(".login-btn").hover(
    function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(".login-content").show();
        $(this).addClass('hovered');
    },
    function() {
        clearTimeout($(this).data('hoverTimeoutId'));
        $(this).data('hoverTimeoutId', setTimeout(function () {
            $(".login-content").hide();
            $(this).removeClass('hovered');
        } ,500));
    });


$('.login-content').hover(
    function(){     
        clearTimeout($(".login-btn").data('hoverTimeoutId'));
    },     
    function(){    
        $(".login-content").hide();
        $(".login-btn").removeClass('hovered');
    });

:hoverpsedoclass を使用する代わりに、デモに示すようにホバー状態を割り当てるようなクラスを使用hoverし ますlogin-btn

デモ:フィドル

于 2013-05-01T01:40:22.787 に答える
0

使用するsetTimeout

$(".login-btn").hover(
function() {
   clearTimeout($(this).data('animator'));
   $(this).data('animator', setTimeout(function () {
      $(".login-content").show();
   } ,1000));
},
function() {
   clearTimeout($(this).data('animator'));
   $(this).data('animator', setTimeout(function () {
      $(".login-content").hide();
   } ,1000));
});

http://jsfiddle.net/uDm64/

于 2013-05-01T01:04:00.627 に答える
0

ユーザーがしばらくの間カーソルを離すことを心配したくない場合は、もう少し状態を確認することをお勧めします。

また、ボタンをホバー表示したい場合は、CSS セレクター「.login-btn:hover」で「.login-btn:hover, .login-btn.hover」に変更します。

フィドル: http://jsfiddle.net/qhAus/

(function() {
    var timer = 0,
        open = false,
        loginBtn = $('.login-btn'),
        loginContent = $('.login-content'),
        startTimeout = function(state, duration) {
            timer = setTimeout(function() {
                timer = 0;
                loginContent[state]();
                open = state === 'show';

                if(!open) {
                    // If it's closed, remove hover class
                    loginBtn.removeClass('hover');
                }
            }, duration || 1000);
    };

    loginBtn.hover(function(e) {
        $(this).addClass('hover');

        if(open && timer) {
            // If about to close but starts to hover again
            clearTimeout(timer);
        }

        if(!(open || timer)) {
            // Don't start to open again if already in the process
            startTimeout('show');
        }
    }, function() {
        // When not hovering anymore, hide login content
        startTimeout('hide', 2000);
    });

    loginContent.mousemove(function(e) {
        // If cursor focus on the login content, stop any closing timers
        if(timer) {
            clearTimeout(timer);
        }
    });

    loginContent.mouseleave(function(e) {
        // When cursor leaves login content, hide it after delay
        startTimeout('hide');
    });

})();
于 2013-05-01T01:50:31.817 に答える