0

ボタンの上に div を表示する Web サイトを作成しています。現在、私はこれを行うことができますが、それは望ましい効果ではありません。私が達成したことを示すために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 またはボタンから離さない限り、表示されたままにする必要があります。

4

2 に答える 2

1

絶対配置を使用する場合は、margin-top の代わりに 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 に答える