onMouseOver、onMouseOut 和 <div>答案

【问题标题】：onMouseOver, onMouseOut and <div>onMouseOver、onMouseOut 和 <div>
【发布时间】：2012-02-04 19:57:31
【问题描述】：

我必须在 javascript 中创建一个动态菜单，所以我使用了 onMouseOver 和 onMouseOut，但问题是当我将鼠标放在行空间上时，菜单消失了，因为它认为我不再在 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>

那么，如何纠正这个问题，也许用 CSS？

谢谢！

【问题讨论】：

当您将display 设置为none 时，元素会丢失其尺寸；因此，无法将鼠标悬停在屏幕上未“显示”的元素上。
@Consciousness 它在 jsFiddle 中失败，但会在本地文件中“工作”。

标签： javascript html onmouseover onmouseout

【解决方案1】：

我不禁想知道您是否应该在https://ux.stackexchange.com/ 上发布一个关于菜单行为的问题（或寻找一个问题），特别是悬停状态（在越来越多的平板电脑和手机上不存在）多产）。但是要解决您的技术问题...

要使菜单表现良好，需要的不仅仅是鼠标悬停和鼠标移开。大多数好的菜单允许用户错误的宽限期，这意味着鼠标可以短暂离开菜单。同样，为了简单地解决您移动鼠标时菜单闪烁的技术问题：

您的 DIV 和列表项有些混淆。为了简单起见，我添加了一些明亮的颜色来帮助澄清元素，并将 DIV 转换为列表项。我还重构了您的 JavaScript 方法，使其与您的标记的耦合稍微不那么紧密。我希望你觉得它有用。

<!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>

你可以在 jsbin 上看到这个直播（由于某种原因在 jsFiddle 中不起作用）： http://jsbin.com/exakiz/2

PS。对不起，我把一些名字改成了英文；我不会说或不懂法语。 :(

【讨论】：

哦，是的，这很好用，谢谢。这是我的错，我忘了把法语单词改成英语！我不知道这个网站ux.stackexchange.com，所以谢谢！

【解决方案2】：

使用纯 JS 很难实现这样的菜单，因为当鼠标移动到子元素时会触发 onmouseover/onmouseout 事件（在菜单中，当鼠标从主元素移动到子菜单时会触发 mouseout）。您应该寻找一些 mouseenter/mouseleave 事件的实现。

但有更简单的方法 - 仅使用 css。这是示例：http://jsfiddle.net/ZjVGN/

【讨论】：

我知道，但是我必须使用JS所以我只能使用CSS，但是我可以使用JS和CSS！