onMouseOver、onMouseOut和<div>
我必须在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？
谢谢！
回答 2
Stack Overflow用户
发布于 2012-01-07 18:36:37
我不禁想知道你是否应该在https://ux.stackexchange.com/上发布一个关于菜单行为的问题(或者寻找一个)，特别是关于悬停状态的问题(这在越来越多的平板和手机上是不存在的)。但是为了解决你的技术问题。
要使菜单表现良好，需要的不仅仅是鼠标悬停和鼠标移出。大多数好的菜单允许用户错误的宽限期，这意味着鼠标可以短暂地离开菜单。同样，为了简单地解决当您移动鼠标时菜单闪烁的技术问题：
您将DIVs和列表项混淆了一点。我添加了一些鲜艳的颜色来帮助澄清元素，并为了简单起见将DIVs转换为列表项。我还重构了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。对不起，我把一些名字改成了英语；我不会说或听不懂法语。:(
Stack Overflow用户
发布于 2012-01-07 18:55:59
使用纯JS很难实现这样的菜单，因为onmouseover/onmouseout事件是在鼠标移动到子元素时触发的(在菜单中，当鼠标从主元素移动到子菜单时，将触发mouseout )。您应该寻找mouseenter/mouseleave事件的一些实现。
但是有一种更简单的方法--只使用css。下面是示例：http://jsfiddle.net/ZjVGN/
https://stackoverflow.com/questions/8768832
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号