Mouseout and mouseleave not working

Question

Hi I am using mouseout and mouseleave methods but both are not working. I tried to fix it but cant find the solution. My code looks fine, it has no err

Answer 1

The problem is that the events are not being caught because they are not exactly bubbling properly.

Live depends on proper bubbling of events. I think the chosen plugin breaks the bubbling

Try this:

$(".chzn-select").chosen()
$(function(){
    $('a').click(function(){
        $('.mydiv').addClass('redbrd')

        $('.redbrd').live('mouseover',function(){
            if($('#mmt').length == 0){
                var htm= '
some text
';
                $('body').append(htm);        
            }    

        }); 
        $('.redbrd').live('mouseout',function(){
            $('#mmt').remove();
        });          


    })        
})

With added css:

.mydiv{padding:10px;}

This makes the div that you are mousing over large enough that you are not instantly entering and exiting it. To see this working in your current example, slowly approach the bottom right corner of the red border until you 'enter' the div in the minuscule white space that is between the select and the div. then move out. You will see it works as expected.

I added the changes I mentioned to a fiddle. You can see it working there.