Я создаю веб-сайт, на котором я хочу отобразить 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 или.
Несколько вещей, которые следует учитывать, при использовании абсолютного позиционирования используйте top вместо margin-top и так далее.
Во-вторых, чтобы избежать всплывания, когда вы покидаете кнопку, используйте следующий селектор:
$(".cart-btn, .minicart").hover(
function () {
$(".minicart").slideDown(100);
}, function () {
$(".minicart").slideUp(2000);
});
Используйте slideDown и slideUp, так как BeNdErR sugested, здесь обновленная версия его скрипки
Оберните обе кнопки и 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/
Надеюсь, это то, что вы хотели.