0

我正在创建一个网站，我想在按钮悬停时显示一个 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 应保持显示状态。

4

2 回答 2

1

有几点需要注意，当使用绝对定位时，使用 top 而不是 margin-top 等等。

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

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

按照 BeNdErR 的建议使用 slideDown 和 slideUp，这是他的小提琴的更新版本

于 2013-10-22T12:21:08.823 回答
0

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

希望这是你想要的。

于 2013-10-22T12:22:19.707 回答