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= '<div id="mmt">some text</div>';
                $('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.

Answer 2

Looking at your fiddle page, there might be some issues with the mouse events being detected due to the complication of the code aside from this part, however using this should get you most of the way there:

$(function() {
    $(".chzn-select").chosen();

    $('a').click(function() {
        $('.mydiv').removeClass().addClass('redbrd mydiv');// NOTE this is in case your other question comes into play with this one.
    });
    $('body').on('mouseenter', '.redbrd', function() {
       $('body').append('<div class="mmt">some text</div>');
    });
    $('body').on('mouseleave', '.redbrd', function() {
        $('.mmt').remove();
    });
});

EDIT: After review, your adding li to the page after your chosen thing.

This should work with that:

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

        $('.redbrd').on('mouseover', 'li', function(e) {
            var $target = $(e.target);
            if ($('#mmt').length === 0) {
                var htm = '<div id="mmt">' + $target.text() + ' some text</div>';
                $('body').append(htm);
            }
        });
        $('.redbrd').on('mouseout', function() {
            $('#mmt').remove();
        });
    });
});

Updated your fiddle here:http://jsfiddle.net/JtQHY/1/ so you can test it.

Answer 3

Instead of using live to bind events to functions, I used the jQuery methods for mouseover and mouseout. In this example, I set up a span within the containing div that shows when your mouse enters the div and hides when you leave the div.

You could change the span to any element you would like to use, and style/position it with CSS if you like.

Is this a viable solution for your problem?

http://jsfiddle.net/Dpp8a/4/