[英]jquery mouseover / show-hide div
我創建了一個腳本,用於在鼠標懸停時顯示div。
<script type="text/javascript">
$(document).ready(function() {
$("a.prikaziDiv").hover(
function() {
var $sibling = $(this).siblings('div.prikazano').show(); // get the sibling div and show it
$('div.prikazano').not($sibling).hide(); // hide the other divs
}, function() {
$(this).siblings('div.prikazano').delay(999).fadeOut(0);; // get the sibling div and hide it after .333 seconds
});
});
</script>
<a class="prikaziDiv" href="#">SHOW</a><div class="prikazano" style="display:none;">aa</div>
它可以正常工作,但是當我將“ SHOW”鏈接懸停時,在該div上帶有光標,但是它消失了。 我不想讓div消失。
有人能幫我嗎?
謝謝!
您將鼠標懸停在錨點上,並且div出現,當您將div懸停時,它消失了,因為您不再將鼠標懸停在錨點上,因此hover()的mouseleave部分將觸發。 您可以將div放在錨點內,也可以使用超時,例如:
$(document).ready(function () {
var timer;
$("a.prikaziDiv").on({
mouseenter: function() {
var $sibling = $(this).siblings('div.prikazano').show();
$('div.prikazano').not($sibling).hide();
},
mouseleave: function() {
var self = this;
timer = setTimeout(function() {
$(self).siblings('div.prikazano').fadeOut(1);
}, 999);
}
});
$('div.prikazano').on({
mouseenter: function() {
clearTimeout(timer);
},
mouseleave: function() {
$(this).delay(999).fadeOut(1);
}
})
});
使用mosueenter而不是懸停。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.