弹出 Div 显示在按钮悬停上

Pop-up Div to appear on hover of button

本文关键字：悬停 按钮 Div 显示 弹出      更新时间：2023-09-26

我正在创建一个网站，我想在悬停在按钮上时显示一个div。目前我能够做到这一点，但这不是预期的效果。我已经在jsfiddle中创建了一个演示来展示我所取得的成就，我将粘贴我的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 或按钮上移开。

需要注意的几点，使用绝对定位时，请使用顶部而不是边距顶部等。

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

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

使用 slideDown 和 slideUp 作为 BeNdErR 的 sugested，这是他的小提琴的更新版本

将按钮和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/

希望这就是你想要的。

相关文章：