jQuery:当div1上的mousenter结束时显示div2 [英] jQuery: Show a div2 when mousenter over div1 is over
本文介绍了jQuery:当div1上的mousenter结束时显示div2的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个橱柜,当我在篮子符号上做一个鼠标时,我想展示一个产品列表。
但是当我用鼠标离开篮子标志时,将鼠标移动到列表中,列表消失(逻辑)。但是我可以做什么,列表仍然显示,只有当我将鼠标移出列表框中消失?
这是我的代码:
I have a shopbasket, and I want to show a productlist, when I make a mousover over the basket-symbol. But when I leave the basket Logo with the mouse, to move the mouse into the list, the list disappears (logical). But what can I do that the list still is shown and only disappears when I move the mouse out of the listbox? Here is my code:
<div id="basket" style="padding:10px; background-color:#00458b;color:white;position:relative;cursor:pointer; width: 130px;z-index:1000;">Basket</div>
<div id="list" style="padding:10px; background-color:#63a0df;color:white;position:relative; width: 200px; display: none;z-index:1100;" >
<ul id="products">
</ul>
<button type="button" class="unset">Destroy</button>
</div>
$('#basket').bind({
mouseenter: function() {
$("#list").fadeIn("slow", function() {
});
},
mouseleave: function() {
$("#list").fadeOut('fast');
}
});
推荐答案
div ,以便 #list
仍然可见,直到您退出该公共div
Wrap your blocks into common div
so that the #list
still visible untill you out from that common div
尝试此方式
<div id="basket" >
<div style="padding:10px; background-color:#00458b;color:white;position:relative;cursor:pointer; width: 130px;z-index:1000;">Basket</div>
<div id="list" style="padding:10px; background-color:#63a0df;color:white;position:relative; width: 200px; display: none;z-index:1100;" >
</div>
这篇关于jQuery:当div1上的mousenter结束时显示div2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文