1

我有一个快速的篮子；当您悬停购物篮链接时出现的结帐框 div。我希望篮子只在悬停在链接上时出现，当用户离开链接时它会消失。

如果用户在主 div 内并且只在鼠标外滑出，该框也应该保持静止。

让我痛苦地发布这个我无法得到它并且已经有一段时间了..

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

jsFiddle

js小提琴。

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>​

jQuery

$('#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 事件，它是一个 jQuery 事件，所以它需要 2 个函数，一个用于mouseenter事件，第二个用于mouseleave，所以你应该使用它mouseenter。

于 2012-08-30T12:07:14.733 回答
1

.onmouseleave不是 jQuery 中的函数。它是.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 回答