弹出式Div出现在按钮的悬停上

Question

我正在创建一个网站，我想在按钮悬停时显示div。 目前，我能够做到这一点，但这不是理想的效果。 我在jsfiddle中创建了一个DEMO来展示我已经实现了什么，我将粘贴我的HTML，jQuery和仅与该问题有关的CSS。

HTML

<div class="cart-btn" ><a href="#">CART</a>    
</div>
<div class="minicart" >
   Items : 5
   Total : $250
    <a href="#" style="color:#fff;">VIEW CART</a>
</div>

jQuery的

$(document).ready(function () {
    $(".cart-btn").hover(

    function () {
        $(".minicart").show(100);
    }, function () {
        $(".minicart").hide(2000);
    });
});

CSS

.minicart {
    width:164px;
    display: none;
    background-color:#0A3151;
    opacity:0.8;
    position:absolute;
    z-index:9999;
    margin-left:450px;
    margin-top:30px;
}

问题：我想要的效果是，“ div应该从按钮下方滑动”并以相同的方式消失”。

但是我主要关心的是，即使我将div悬停在div上，它也应该保持专注。 目前，只要我将鼠标从按钮上移开，它就会消失。 除非用户将鼠标从div或按钮上移开，否则一次显示的div应该保持显示状态。

Answer 1

注意事项，使用绝对定位时，请使用top而不是margin-top等。

其次，要避免弹出按钮在离开按钮时折叠起来，请使用以下选择器：

$(".cart-btn, .minicart").hover(
    function () {
        $(".minicart").slideDown(100);
    }, function () {
        $(".minicart").slideUp(2000);
});

在BeNdErR提示时使用slideDown和slideUp，这是他的小提琴的更新版本

Answer 2

将按钮和div都包裹在另一个div中。 将此div用于悬停事件。

<div id="cbutt">
    <div class="cart-btn" ><a href="#">CART</a>
    </div>
    <div class="minicart">Items : 5 Total : $250 <a href="#" style="color:#fff;">VIEW CART</a>
    </div>
</div>  


$(document).ready(function () {
$("#cbutt").hover(

function () {
    $(".minicart").show(100);
}, function () {
    $(".minicart").hide(2000);
});

}）

这是一个小提琴： http : //jsfiddle.net/Ncj2E/

希望这就是您想要的。