1

私のウェブサイト: http://modernego.info

という名前の<a>要素があり#btn-cartます。提供されると、ドロップダウンして という名前の div が表示され.block-cartます。だから、これが私がやりたい方法です：

ホバーオンの場合 に#btn-cart設定 ホバー アウトの.block-cart場合に設定display:block;
#btn-cart.block-cartdisplay:none;

#btn-cartに設定.block-cartしてから上に置いた場合、 mouseleavedisplay:block;
を.block-cart無視し#btn-cartます。

以下のコードで動作するようになりました。ただし、 を設定する$('.block-cart').fadeOut(200)と、ホバーしても に.block-cart設定されます。display:none

また、.liveこのカートは Ajax を介して実行され、Ajax 呼び出し後に jQuery が機能しないため、使用しています。より良い方法はありますか？

jQuery(function($) {
    $('#btn-cart').live('mouseenter', function() {
        $('.block-cart').css('display','block');                
    });
    //----------------------------------------------            
    $('.block-cart').live('mouseenter', function() {
        var close = false;
        $('.block-cart').css('display','block');    
    });
    //----------------------------------------------
    $('.block-cart').live('mouseleave', function() {
        close = false;
        $('.block-cart').fadeOut(200);   
    }); 
    //----------------------------------------------

    if (close != false) {   
        $('#btn-cart').live('mouseleave', function() {  
            $('.block-cart').fadeOut(200);
        });
    }

});

        <li class="hover hover-cart-sidebar">
                <a href="http://modernego.info/checkout/cart/" class="btn-cart hover-cart" id="btn-cart" title="Cart">

                        <span class="quantity">0</span>

                </a>    
                <div class="block block-cart">
    <div class="block-title">
    <strong><span>My Cart</span></strong>
</div>
<div class="block-content">
                        <p class="empty">Add something to your cart.</p>


        </div>

4

1 に答える 1

2

さまざまな方法で何度も行ってきましたが、この質問について考えると、データ属性でハックするのが最善の方法だと思います。

簡単な例:

HTML (簡素化/ダーティ バージョン、子要素のフォーカス/ホバーをチェックするための入力を追加)

<div id="container">
    <a href="#" id="opener">open</a>
    <div id="menu">
        It's opened<br />
        <input /><br />
        Here
    </div>
</div>

JS *(DOM 検索の繰り返しを避けるために最適化する必要がありますが、
* Updated to ReflectfadeOut()の代わりにhide()
* Updated to use on()instead ofhover()

$("#menu").hide();

$("#container")
    .on("mouseenter", "#menu", function(){
        $(this).data("hover", true);
        $(this).show();
    })
    .on("mouseleave", "#menu", function(){
        $(this).data("hover", false);
        $(this).fadeOut(200);
    });

$("#container")
    .on("mouseenter", "#opener", function(){
        $("#menu").show();
    })
    .on("mouseleave", "#opener", function(){
        setTimeout(function(){
            var menuHovered = $("#menu").data("hover");
            if(!menuHovered) {
                $("#menu").fadeOut(200);
            }
        }, 50);
    });

フィドル

http://jsfiddle.net/Meligy/GLG6A/ (hover()幅を使用hide())
http://jsfiddle.net/Meligy/GLG6A/3/ (hover()幅を使用fadeOut()、わずかな変更のみ)
http://jsfiddle.net/Meligy/GLG6A/ 5/ (on()の代わりに要素を使用hover())
http://jsfiddle.net/Meligy/GLG6A/6/ (on()コンテナーで使用、AJAX により現実的)

クレジット：

ここからインスピレーションを得ました マウスがjQueryの要素の上にあるかどうかを確認するにはどうすればよいですか? そして、それが最も簡単に機能すると考え、実際に機能しました! （少なくとも私のテストでは）

于 2012-05-01T06:15:49.420 に答える