Всплывающее окно Div появляется при наведении на кнопку

0

Я создаю веб-сайт, на котором я хочу отобразить div при наведении на кнопку. В настоящее время я могу это сделать, но это не желаемый эффект. Я создал DEMO в 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 или.

  • 0
    что-то вроде этого? jsfiddle.net/quADx/3
  • 0
    Да. Именно так. Но моя главная проблема в том, что div не должен скрываться, если пользователь наводит указатель мыши на div.
Показать ещё 1 комментарий

2 ответа

1
Лучший ответ

Несколько вещей, которые следует учитывать, при использовании абсолютного позиционирования используйте top вместо margin-top и так далее.

Во-вторых, чтобы избежать всплывания, когда вы покидаете кнопку, используйте следующий селектор:

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

Используйте slideDown и slideUp, так как BeNdErR sugested, здесь обновленная версия его скрипки

  • 0
    Это именно то, что я хотел.
0

Оберните обе кнопки и div в другой div. Используйте этот div для события hover.

<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/

Надеюсь, это то, что вы хотели.

  • 0
    Я не могу изменить HTML

Ещё вопросы

Сообщество Overcoder
Наверх
Меню