[英]onMouseOver, onMouseOut and <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來糾正它呢?
謝謝!
我忍不住想知道您是否應該在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。 對不起,我把一些名字改成了英文。 我不會說或不會法語。 :(
使用純JS很難實現這樣的菜單,因為當鼠標移到子元素時會觸發onmouseover / onmouseout事件(在菜單中,當鼠標從主元素移至子菜單時,mouseout將觸發)。 您應該尋找一些mouseenter / mouseleave事件的實現。
但是有一種更簡單的方法-僅使用CSS。 示例如下: http : //jsfiddle.net/ZjVGN/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.