jQuery - Hover Off Being Triggered on Child

Question

I have a 640x200 div with a hidden 200x100 div inside of it. My goal was to fade the hidden div in when the 640x200 div is hovered over, and then back out when that div is exited. Everything works fine going in, but when I hover over the child div it triggers the hover off function below.

UPDATE I know realize that the hover off is being triggered when I hover over an element INSIDE the hidden div.

I'm using this code:

jQuery("#pstsldcon").hover(function() {
  jQuery("#slidenav").animate({
        opacity: +1
    }, 300)

}, function() {
  jQuery("#slidenav").animate({
        opacity: 0
    }, 300)
});

[Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery](http://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div-withou) - which ccan be modified for jQuery. Also read this http://www.quirksmode.org/js/events_mouse.html — mplungjan, Jul 06 '14 at 05:50
looks like your problem is caused by something else, check this demo http://jsfiddle.net/9LXFn/3/ , it works expectedly. — King King, Jul 06 '14 at 05:54

score 1 · Accepted Answer · answered Jul 06 '14 at 05:56

jQuery(function($) {
    $("#pstsldcon").on('mouseenter mouseleave', function(e) {
        if ( e.target === this ) {
            $("#slidenav").animate({ 
                opacity: (e.type === 'mouseenter' ? 1 : 0) 
            }, 300);
        }
    });
});

score 0 · Answer 2 · answered Jul 06 '14 at 05:26

0

You need to also attach a hover listener to your hidden <div>, and capture the Event that gets passed to it. With that, you can prevent it from bubbling up to the parent <div>, and thereby not triggering the hover out.

You'll want to use something like:

function(e) {
    e.stopPropagation();
}

on the hidden <div>

answered Jul 06 '14 at 05:26

jprofitt

10,874
4
36
46

jQuery("#slidenav").hover(function(e) { e.stopPropagation(); } doesn't work. :( – NotaGuruAtAll Jul 06 '14 at 05:35
Hmm, maybe `e.preventDefault()` as well for some reason. But that shouldn't actually do anything different. You could also use the child's `hover` to keep it shown perhaps. – jprofitt Jul 06 '14 at 05:37
Actually just updated with additional info: I know realize that the hover off is being triggered when I hover over an element INSIDE the hidden div. Does this change anything? – NotaGuruAtAll Jul 06 '14 at 05:49
All I guess is that you could attach the same `stopPropagation()` to all of the elements in the hidden `
`, possibly with a `> *` selector.
– jprofitt Jul 06 '14 at 05:52

jQuery - Hover Off Being Triggered on Child

2 Answers2