child div triggers parent div onmouseout event

Question

I have div inside a div with the parent div have onmouseover and onmouseout functions

but when I hover on the child div the onmouseout function is triggerd which I don't want help?

<div onmouseover="alert("inside")" onmouseout="alert("outside")> <div></div> </div>

example:

http://jsfiddle.net/sp9bD/2

the black div is inside the red one but the "outside" alert shows up

There is called event bubbling. Take a look at this SO question: http://stackoverflow.com/questions/5971601/javascript-event-bubbling — Ye Liu, Jun 16 '13 at 19:22

score 0 · Answer 1 · answered Jun 16 '13 at 19:30

0

$('div').hover(function(e) {
    if (!(event.target.id === "inside")) {
        alert('inside');
    }
}, function () {
        alert('outside');

});

Try something like this using jQuery, here's the redone fiddle

http://jsfiddle.net/sp9bD/3/

answered Jun 16 '13 at 19:30

James Daly

1,357
16
26

still dosent work , when i hover over the child div an "outside" alert is still trigerd.. – user2436536 Jun 16 '13 at 20:31
if you hover over the black div you won't get any alerts updated fiddle http://jsfiddle.net/sp9bD/5/ – James Daly Jun 16 '13 at 21:31
yea, but try entering from the red to the black the ouside will alert – user2436536 Jun 17 '13 at 18:03

child div triggers parent div onmouseout event

1 Answers1