Home > onMouseOut fix on nested elements – JavaScript

onMouseOut fix on nested elements – JavaScript

When you have nested elements and you add an onMouseOut event handler to the parent element, browsers trigger onMouseOut event when mouse pointer hovers it’s child elements.
While this is a standard behaviour, for one project I needed to write a code to override this behaviour.
With this code, when you mouse over the child elements, onMouseOut event will be ignored.

You can download this code here:
http://images.code-head.com/code/javascript/fixOnMouseOut.zip

You can test it here:
http://images.code-head.com/code/javascript/fixOnMouseOuttest.html

This code is cross browser and here is how to use it:

<script language="javascript" type="text/javascript" src="fixOnMouseOut.js"> </script>
<div onMouseOut="fixOnMouseOut(this, event, 'JavaScript Code');">
   So many child elements
</div>

Filed under: JavaScript,Web Design,Web Development Posted by: Hamid

28 Comments »

Luca Bartolini:

wow, that’s great! Thank you very much!!!!

Comment
Harry:

Thank you Hamid!

This is exactly what I’ve been looking for. Your code works beautifully! Thanks!

Comment
Santhosh:

Thank you Sir…

this code works very well… being searching for this code…

Comment
Suresh N:

This is the exact code i was searching for. Works well in IE 8 and Firefox.

Thank you very much.

Comment
whitewash:

Great one!
thx.

Comment
Seeker:

You Rock!

Thanks!

Comment
Sumit:

Great help. Thanks a ton

Comment
Alyx:

THANKS. This is a HUGE help.

Comment
dan:

Nice, looking for this!

Comment
Tommy Lau:

Excellent fix. Thanks for sharing the code.

Comment
Alanu:

Super !!! Thank You, I needed it quickly !

Comment
Cosmin:

Hi,
I used this code, with a bit of tweeking, in making a fixed div grow and shrink as it should when the onmouseover and onmouseout events occur.
I had to use on both onmouseover and onmouseout events, otherwise the div would shrink and grow at will.
When the onmousover event occured I had to check what was the previous div that had the mouse over it, to see if the div should grow or not. I used a global variable for that.

Thank you, for the code, it’s been of great help.

Comment
David:

Thanks, I was looking for this

Comment
David:

Thanks much much much. Saved my life.

Comment
Juan:

Nice piece of code, thanks for sharing.

Comment
quirinobytes:

CLAP CLAP CLAP, wonderfull solution to work around this browser compliant problerm.

Comment
Kyle:

Hello,

I saw this and it seemed like overkill, so I looked for something else.

It turns out that you can use onmouseenter and onmouseleave instead of onmouseover and onmouseout. Problem solved.

P.S I can’t see a single date except for “copyright 2011″ at the bottom, so I’m hoping this post isn’t 7 years old or something.

Comment
Codehead:

Hi Kyle, thanks for the comment, this post is 4 years old, this was one of my forum posts on my old forums that I got rid of around 2 years ago…

Comment
Yuji:

Hi,
Thank for your code. It is still helpful for browsers except for IE.

I changed your code just a little bit because I want to use a function rather than code text as dispatch routine.

1. function definition
function fixOnMouseOut(element, event, JavaScript_code)
=>
function fixOnMouseOut(element, event, eventHandler)

2. evaluate dispatch
eval(JavaScript_code);
=>
eventHandler(event);

It works well for me (Safari).
How can I treat your header comments?

Comment
Fred:

In a word -> Thanks!

Comment
David:

thank you, thank you, thank you!! was struggling for hours with this problem, your code is the first that solves it perfectly!

Comment
Arthur:

Thanks man!

Comment
Dyte:

Wonderful, just what I needed. Thanks.

Comment
Orlando Cano:

Hey brother..!!!

Thank you very much.!!
Your code really works to one hundred and ten percent, i needed this fix..

Great.!!

Comment
Tuong:

Thank U! nice simple script!

Comment
okyo:

damn you saved me

Comment
Sherry:

This helped me a lot Thanks~

Comment
Vaidul:

Thanks a lot, but how to solve problem of child of select box?

Comment