Question

I have a jquery script where if user mouseenter, element is .show(), and mouseleave, element is .hide(). But what if you have the user click, and want to show the element even if the mouse leaves? How would you override the mouseleave, when user clicks?

My script goes something like this

    $('.block').live("mouseenter",function(){
                var id= $(this).attr('id');
                $('#'+id).show();
                $(this).click(function(){
                      //show? is this how it works? not sure where click should go.
        });

            }).live("mouseleave",function(){
            var id= $(this).attr('id');
            $('#'+id).hide();

        });

How do I deal with click?

Thanks!

Answer 1

You can unbind the mouseleave event handler when the user clicks the div

$(function() {

    $('.block').live("mouseenter", function() {
        var id = $(this).attr('id');
        $('#' + id).show();
        $(this).click(function() {
            //show? is this how it works? not sure where click should go.
        });

    }).live("mouseleave", function() {
        var id = $(this).attr('id');
        $('#' + id).hide();

    }).live("click",function(){
         $(this).unbind("mouseleave"); 
         $(this).removeClass('block');  //this was added
    });
});

Try could even try using using $('.block').hover(function(){},function(){}) instead of handling the mouseover and mouseleave events individually.Also if possible use delegation instead of using live. But that is just an opinion not related to your question.

Edit : with delegate . Note for this to work the div.blocks need to be as

<div id="container">
<div class="block">
<div class="block">
</div>



$('#container').delegate('.block', 'mouseenter', function() {
    var id = $(this).attr('id');
    $('.msg').html('I entered :' + id);

});
$('#container').delegate('.block', 'mouseleave', function() {
    var id = $(this).attr('id');
    $('.msg').html('I came out of :' + id);

});
$('#container').delegate('.block', 'click', function() {
    var id = $(this).attr('id');
    $('.msg').html('I entered and clicked :' + id);
    $(this).unbind("mouseleave");
    $(this).removeClass('block');
}); 

Also you would need to remove the class block from the div which is clicked so as to counter the effect of .live or .delegate