1

私は簡単なバスケットを持っています。バスケット リンクにカーソルを合わせると表示されるチェックアウト ボックスの div。リンクの上にカーソルを置いたときにのみバスケットが表示され、ユーザーがリンクから離れるとバスケットが消えます。

ユーザーがメイン div 内にいて、スライドアウト onmouseout のみの場合も、ボックスは静止したままにする必要があります。

これを投稿するのは苦痛です。私はそれを手に入れることができず、しばらくの間それに取り組んでいました..

jQuery

// Toggle the Quick Cart (uses Load Balance for higher TPS no que!)
$('#show-quick-cart').hover(function () {        
    $('#quickcart').slideDown(500);
    return false;
});
$('#quickcart').mouseleave(function () {        
    $(this).slideUp(500);
    return false;
});

HTML5

<a id="show-quick-cart" href="#show-quick-cart">MY BAG</a>
<div id="show-quick-cart-zone">
    <div id="quickcart" class="quickcart hide">
        <div class="quickcarttitle"><span>SHOPPING BAG</span></div>
        <div class="quickcart-products">
            <p><strong>No items in your cart so far</strong></p>
            <a href="/cart?ref=quick-cart"><img src="//gc-cdn.com/cart/securecheckout.png"></a>
        </div>
    </div>
</div>

デモ

ライブデモ (ページ)

http://tinyurl.com/bwn33op

実際のjQuery

http://tinyurl.com/cz6kl66

jsフィドル

jsFiddle .

4

4 に答える 4

3

JSFiddle のデモ

HTML

<div id="pardiv">
<a id="show-quick-cart" href="#show-quick-cart">MY BAG</a>
<div id="show-quick-cart-zone">
    <div id="quickcart" class="quickcart hide">
        <div class="quickcarttitle"><span>SHOPPING BAG</span></div>
        <div class="quickcart-products">
            <p><strong>No items in your cart so far</strong></p>
            <a href="/cart?ref=quick-cart"><img src="//gc-cdn.com/cart/securecheckout.png"></a>
        </div>
    </div>
</div>
</div>​

Jクエリ

$('#show-quick-cart').mouseenter(function () {        
    $('#quickcart').slideDown(500);
    return false;
});
$('#pardiv').mouseleave(function () {        

    $('#quickcart').slideUp(500);
    return false;
});

​
于 2012-08-30T12:10:55.600 に答える
1

onmouseleaveは有効なJavaScriptイベントではありません。mouseleaveつまり、を削除するだけonです。

フィドル。

注意：hoverこれも有効なJavaScriptイベントではなく、jQuerymouseenterイベントであるため、2つの関数が必要です。1つはイベント用、もう1つはイベント用です。代わりにmouseleave使用する必要があります。mouseenter

于 2012-08-30T12:07:14.733 に答える
1

.onmouseleavejQueryの関数ではありません。.mouseleave()です

以下で編集（OPのコメントの後）

$('#show-quick-cart').on('mouseover mouseout',hover);
$('.quickcart').on('mouseover mouseout',hover);

function hover(e){
    e = e || event;
    var el = e.target || e.srcElement
       ,showel = $('.quickcart') //cache element to slide
    ;

    /* 
       test and set hoverstate of the element to slide
       note: because the sliding element contains more
       elements, we check for the originating element 
       *not* being the triggering element
    */
    if (!/show-quick-cart/i.test(el.id)) {
     showel .attr('data-ishovered',/over/i.test(e.type));
    } else {
     showel .attr('data-ishovered',false)
    }

    /* if image is hovered, no further action */
    if (/true/i.test(showel .attr('data-ishovered'))){return true;}

    /* only apply further hover handling to #NotificationSummary */
    if (/over$/i.test(e.type) && /show-quick-cart/i.test(el.id)){
       showel .slideDown();
    
    } else {
        /* use a timeout to allow the user to move over 
           into the image. If it's not hovered slide it up,
           otherwise, do nothing
        */
        setTimeout(function(){
            if (/false/i.test(showel .attr('data-ishovered'))) {
                showel .slideUp();
                showel .attr('data-ishovered',false);
            }
          }
        ,200);
    }
}

</p>

デモ- (更新)

于 2012-08-30T12:12:34.627 に答える
0 
$('#quickcart').mouseover(function () {        
    $(this).slideUp(500);
    return false;
});
于 2012-08-30T12:12:27.220 に答える