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 errors so I want to know why it is not working. Here is example code link

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

    $('.redbrd').live('mouseover', function(){
        var htm= '<div id="mmt">some text</div>'
        $('body').append(htm)
    })
    $('.redbrd').live('mouseout', function(){
        $('#mmt').remove()
    })
})

You creating multiple div-s with the same id. Maybe class is what you are looking for not id. — Aleksandr M, Jan 02 '13 at 19:01
Also, it's bad practice not to use semicolons after each line. — Scrimothy, Jan 02 '13 at 19:15
In your original post, you try to register the events on elements with a class that none of the elements in the html have yet when the page loads. — Zack, Jan 02 '13 at 19:19
yes, I want to add class with click function then add mouseenter and mouseleave event on that class — jchand, Jan 02 '13 at 19:22

Mark Schultheiss · Answer 1 · 2013-01-03T13:34:58.267

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.

it is not working, is there any other method show popup rather than mouseenter and nouseout — jchand, Jan 03 '13 at 04:26
I think we need more details here then: exact version of browser, what exactly are you seeing that is ineffective/not as desired. And, perhaps a more limited example (if possible) functionally. — Mark Schultheiss, Jan 03 '13 at 14:34
remove padding from .mydiv, then hover select type. it should append #mmt on body and mouseout it then it should remove #mmt. Thats it — jchand, Jan 03 '13 at 15:04
I find the solution for this, actually chosen jquery plugin using mouseenter and mouseleave method. It is blocking out mouseenter and mouseout function. I put my function into chosen plugin and it works — jchand, Jan 05 '13 at 14:30

score 2 · Answer 2 · answered Jan 02 '13 at 20:01

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.

Zack · Answer 3 · 2013-01-03T18:22:18.757

0

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/

edited Jan 03 '13 at 18:22

answered Jan 02 '13 at 19:23

Zack

2,789
33
60

He uses live. So there is no problem here. – Denys Séguret Jan 02 '13 at 19:24
@dystroy no elements have the class he tries to bind the events to on page load. he adds the class thru the click of the link. – Zack Jan 02 '13 at 19:25
@ZackT. That is not a big issue but if you think i have remove click event and calling event with existing class please check updated code http://jsfiddle.net/Dpp8a/2/ – jchand Jan 02 '13 at 19:31
Is the point of what you are trying to do, to show a message to the user when they hover over your select box? – Zack Jan 02 '13 at 19:36
yes i want to show massage when user hover custom select menu and when he mouseout the custom select menu it should hide – jchand Jan 02 '13 at 19:39
when mouseout the select menu not hiding the massage – jchand Jan 04 '13 at 07:56
@jchand [Take a look at this thread](http://stackoverflow.com/questions/7448468/why-cant-i-reliably-capture-a-mouseout-event) It has some discussion on why the mouseout event can't always reliably be caught. – Zack Jan 04 '13 at 14:11

Mouseout and mouseleave not working

3 Answers3

Linked