View Full Version : onMouseOver triggered for all divs nested

Aug 3rd, 2007, 11:11 AM
Let's say...

<div id="menus">Menu
<div id="menu1" onMouseOver="highlight(this)" onMouseOut="unhighlight(this)">Menu1
<div id="menu1_1" onMouseOver="highlight(this,'menu1')" onMouseOut="unhighlight(this)">Menu 1.1</div>
<div id="menu1_2" onMouseOver="highlight(this,'menu1')" onMouseOut="unhighlight(this)">Menu 1.2</div>
<div id="menu1_3" onMouseOver="highlight(this,'menu1')" onMouseOut="unhighlight(this)">Menu 1.3</div>

<div id="menu2" onMouseOver="highlight(this)" onMouseOut="unhighlight(this)">

<div id="menu3" onMouseOver="highlight(this)" onMouseOut="unhighlight(this)">


Why is it that when i move around menu1_1, menu1_2, and menu1_3 and they trigger an onMouseOver/Out, menu1 also triggers an onMouseOver/Out?

How do I prevent that? i.e. only menu1_1, menu1_2, and menu1_3 trigger an onMouseOver/Out and NOT including menu1?

Aug 3rd, 2007, 11:53 AM
Divs are effectively boxes on the page, you have placed divs inside each other so when you mouseOver the inner div you have also put your mouse over the outer div.

I believe it works like this because the mouseOver event "bubbles" up through the divs. You can stop this "bubbling" effect, but like usual different browsers need different approaches. See this article on the excellent Quirksmode website about Event Order (http://www.quirksmode.org/js/events_order.html).