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

使用slideDown和slideUp作为BeNdErR sugested，这是他的fiddle

的更新版本

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/

希望这是你想要的。

弹出Div显示在按钮悬停时

2 个答案: