Javascript 按钮悬停时显示的弹出Div

我正在创建一个网站，我想在其中显示一个按钮悬停div。目前我可以做到这一点，但它不是理想的效果。我已经在JSFIDLE中创建了一个脚本来展示我所取得的成就，我将粘贴我的HTML、jQuery和与此问题相关的CSS

HTML

CSS

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

---

然而，我主要担心的是，即使我将鼠标悬停在div上，div也应该保持焦点。目前，只要我将鼠标从按钮上移开，div就会消失。显示的div应该保持显示，除非用户将鼠标从div或按钮上移开。

使用绝对定位时，需要注意的几点是使用top in而不是页边顶部等等

第二，为避免离开按钮时弹出窗口折叠，请使用以下选择器：

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

---

按BeNdErR的建议使用slideDown和slideUp，这是他的更新版本，将按钮和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);
});

项目：5共计：250美元
$（文档）.ready（函数（）{
$（“#cbutt”）。悬停(
函数（）{
$（“.minicart”）.show（100）；
}，函数（）{
$（“.minicart”）.hide（2000年）；
});

})

这是一把小提琴：

---

希望这就是你想要的。

类似的东西？是的。没错。但我主要担心的是，如果用户将鼠标移到div上，div不应该隐藏。这里是@BeNdErR的fiddle的更新，我无法更改htmlth这正是我想要的。

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

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

<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);
});