onMouseOver, onMouseOut and <div>

Question

onMouseOver, onMouseOut and <div>

3.5k Views Asked by Guillaume At 03 April 2025 at 18:43

I have to make a dynamic menu in javascript, so I use onMouseOver and onMouseOut, but the problem is when I focus my mouse on line space, the menu dissapear because it think I'm no more in the div!

<script type="text/javascript">
function cacherSousMenu(menu)
{
    if(menu == "ajout")
    {
        document.getElementById('sousMenuAjout').style.display = document.getElementById('sousMenuAjout').style.display=='none'?'block':'none';
        document.getElementById('imgPlusMoinsAjout').src = document.getElementById('sousMenuAjout').style.display=='none'?'images/plus.gif':'images/moins.gif';
    }
    else if(menu == "inscrire")
    {
        document.getElementById('sousMenuInscrire').style.display = document.getElementById('sousMenuInscrire').style.display=='none'?'block':'none';
        document.getElementById('imgPlusMoinsInscrire').src = document.getElementById('sousMenuInscrire').style.display=='none'?'images/plus.gif':'images/moins.gif';
    }
}

<nav>
<ul>
<div id="ajouter" onmouseover="cacherSousMenu('ajout');">
<li class="titre">Ajouter <img src="images/plus.gif" id="imgPlusMoinsAjout" alt="Image Plus Moins"></li>
</div>
<div id="sousMenuAjout" onmouseout="cacherSousMenu('ajout');">
<ul>
<li><a href="index.php?page=3">Un établissement</a></li>
<li><a href="index.php?page=4">Une filière</a></li>
<li><a href="index.php?page=5">Une UE</a></li>
</ul>
</div>
<div id="inscrire" onmouseover="cacherSousMenu('inscrire');">
<li class="titre">Inscrire <img src="images/plus.gif" id="imgPlusMoinsInscrire" alt="Image Plus Moins"></li>
</div>
<div id="sousMenuInscrire" onmouseout="cacherSousMenu('inscrire');">
<ul>
<li><a href="index.php?page=2">Un nouvel étudiant</a></li>
<li><a href="index.php?page=6">Un étudiant à une UE</a></li>
</ul>
</div>
<li class="titre"><a href="index.php?page=7">Afficher tous les étudiants</a></li>
<li class="titre">Aide</li>
<ul>
</nav>

So, how to correct that, maybe with CSS?

Thank!

Original Q&A

There are 2 best solutions below

Krzysztof On 07 January 2012 at 10:55

It's hard to implement such menu using pure JS, because onmouseover/onmouseout events are fired when mouse move to the child element (in menu when your mouse moves from main element to submenu mouseout will fire). You should look for some implementation of mouseenter/mouseleave events.

But there is easier way - by using css only. Here is example: http://jsfiddle.net/ZjVGN/

**Bernhard Hofmann** · Accepted Answer

I can't help but wonder if you should post a question (or look for one) on https://ux.stackexchange.com/ about menu behaviour, and in particular, hover states (which don't exist on pads and phones which are becoming more prolific). But to solve your technical issue...

It takes a lot more than just mouse over and mouse out to make a menu behave nicely. Most good menus allow a grace period for user error, meaning the mouse can leave the menu briefly. Again, to simply solve your technical issue of the menu flashing when you move your mouse:

You have DIVs and list items mixed up a little. I've added some bright colours to help clarify the elements, and converted the DIVs to list items for simplicity. I also refactored your JavaScript method to make it slightly less tightly coupled with your markup. I hope you find it useful.

<!doctype HTML>
<html>
<head>
<style>
.titre {background-color:red;}
.menuItemWrapper {background-color:green;}
</style>
</head>
<body>
<nav>
    <ul id="ajouter" onmouseover="showMenu('sousMenuAjout','imgPlusMoinsAjout',true);" onMouseOut="showMenu('sousMenuAjout','imgPlusMoinsAjout',false);">
            <li class="titre">Ajouter <img src="images/plus.gif" id="imgPlusMoinsAjout" alt="Image Plus Moins"></li>
        <ul id="sousMenuAjout" class="menuItemWrapper" onMouseOut="hideMenu('sousMenuAjout');">
                <li><a href="index.php?page=3">Un établissement</a></li>
                <li><a href="index.php?page=4">Une filière</a></li>
                <li><a href="index.php?page=5">Une UE</a></li>
            </ul>
    </ul>

    <ul id="inscrire" onmouseover="showMenu('sousMenuInscrire','imgPlusMoinsInscrire',true);" onMouseOut="showMenu('sousMenuInscrire','imgPlusMoinsInscrire',false);">
        <li class="titre">Inscrire <img src="images/plus.gif" id="imgPlusMoinsInscrire" alt="Image Plus Moins"></li>
        <ul id="sousMenuInscrire" onmouseout="cacherSousMenu('inscrire');" class="menuItemWrapper">
            <ul>
                <li><a href="index.php?page=2">Un nouvel étudiant</a></li>
                <li><a href="index.php?page=6">Un étudiant à une UE</a></li>
            </ul>
        </ul>
        <li class="titre"><a href="index.php?page=7">Afficher tous les étudiants</a></li>
        <li class="titre">Aide</li>
    </ul>
</nav>
<script type="text/javascript">
function showMenu(menuId, menuIconId, visible) {
    var displayStyle, imageName;
    if (visible) {
        displayStyle = 'block';
        imageName = 'images/moins.gif';
    } else {
        displayStyle = 'none';
        imageName = 'images/plus.gif';
    }
    document.getElementById(menuId).style.display = displayStyle;
    document.getElementById(menuIconId).src = imageName;
}
showMenu('sousMenuAjout', 'imgPlusMoinsAjout', false);
showMenu('sousMenuInscrire', 'imgPlusMoinsInscrire', false);
</script>
</body>
</html>

You can see this live on jsbin (doesn't work in jsFiddle for some reason): http://jsbin.com/exakiz/2

PS. Sorry I switched some names to English; I don't speak or understand French. :(

onMouseOver, onMouseOut and <div>

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ONMOUSEOVER

Related Questions in ONMOUSEOUT

Trending Questions

Popular # Hahtags

Popular Questions