Ok let me show the code first, although it doesn't really matter:
HTML
<div id="menubar" onmouseover="show_menu()" onmouseout="hide_menu()">
<p id="current">Καλώς ήλθατε. Βρίσκεστε στην αρχική σελίδα.</p>
<ul id="menu">
<li><a href="#">Blah</a></li>
<li><a href="#">Halb</a></li>
</ul>
</div>
CSS:
div#menubar p#current
{
display: inline;
}
div#menubar ul#menu
{
display: none;
}
/* rest is styling */
/* PS: div size is fixed */
JS:
function show_menu()
{
document.getElementById('current').style.display = 'none';
menu = document.getElementById('menu');
menu.style.visibility = 'hidden';
menu.style.display = 'block';
set_opacity(menu, 0);
menu.style.visibility = 'visible';
fade_in('menu', 0, 30);
}
function hide_menu()
{
document.getElementById('menu').style.display = 'none';
document.getElementById('current').style.display = '';
}
Representation:
+—————————————+
|…………………………………………| That's my div. No matter what's displayed in the
+—————————————+ DIV, either the <p> or the <ul>, as long as the mouse doesn't leave the block is shouldn't run the js again and again.
So, when my DIV is like
+—————————————+
|LI~LI~LI~LI~LI~LI~LI~LI|
+—————————————+
when the mouse goes from one LI to another, the JS is run again and again. Why?
There is no hint of bubbling or capturing, as the is only one handler, the one of the DIV.