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.
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.
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();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='div'>
<div class='element' style='display:none;'>
boxed element
</div>
<div class='dropdown' style='display:none;'>
menu
</div>
</div>
This did the trick for me
$("#id").click(function(){
$("#id").off("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.
i.e. Something like:
$(".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();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With