单击对象时停止鼠标悬停
如果我想要mouseenter一个div,一个元素将显示,然后当mouseleave,元素消失。
If I want to mouseenter a div, an element will show, then when mouseleave, element disappears.
我有一个鼠标内部的点击功能,
I have a click function inside the mouseenter so theres a drop down menu when clicked.
我想要下拉菜单和元素即使在鼠标时保持活动。所以我想要mouseleaves不适用在这种情况下,当有一个点击事件。用户必须再次点击元素或页面上的任何位置,使元素和下拉菜单消失。
I want the dropdown menu and the element to stay active even when mouseleaves. So I want mouseleaves to not be applicable in this situation, when there's a click event. User will have to click on the element again or anywhere on the page to make the element and dropdownmenu disappear.
但我想保持mouseleave功能工作,所以如果用户鼠标div,元素会显示,他们可以再次点击它。
But I want to keep mouseleave function working so if user mouseenters a div, the element will show and they can click on it again.
我目前有这样的东西,但我只是不知道如何使鼠标离开不适用
I currently have something like this, but I just dont know how to make the mouseleave to not be applicable when clicked
$(".div").mouseenter(function(){
$(".element",this).show();
$(".element").click(function(){
$(".dropdown").show();
return false;
});
}).mouseleave(function(){
$(".element",this).hide();
});
编辑:
HTML
<div class='div'>
<div class='element' style='display:none;'>
boxed element
</div>
<div class='dropdown' style='display:none;'>
menu
</div>
</div>
您可以设置一个自定义属性,点击。 mouseleave事件处理程序可以在隐藏元素之前检查此自定义属性的值。
You can set a custom attribute for marking the item as clicked. The mouseleave event handler can check the value of this custom attribute before hiding the element.
类似的东西:
$(".div").mouseenter(function(){
$(".element",this).show();
$(".element").click(function(){
$(".dropdown").show();
// set custom attribute for marking this one as clicked
$(this).attr('clicked', 'yes');
return false;
});
}).mouseleave(function(){
// check custom attribute before hiding the element
if($(this).attr('clicked') != 'yes') {
$(".element",this).hide();
}
});