製作網頁的時候常常用到這樣一個效果：滑鼠移動到標題上時會顯示出一個菜單，滑鼠移出標題後此菜單自動消失。
實現上述效果的時候，也許第一次你會這樣寫：
<html>
<head>
<script type="text/javascript">
function showMenu()
{
document.getElementById("mymenu").style.display="block";
}
function hideMenu()
{
document.getElementById("mymenu").style.display="none";
}
</script>
<style type="text/css">
#menu{
border:1px solid gray;
display:none;
}
</style>
</head>
<body>
<div id="title" onmouseover="showMenu()" >這個是標題，請將滑鼠移上來</div>
<div id="mymenu" onmouseout="hideMenu()">
<a href="index.html">首頁</a>
<a href="navigate.html">導航</a>
<a href="news.html">新聞</a>
<a href="email.html">郵箱</a>
</div>
</body>
</html>
到此你的第一個實現方法就寫完了，可是你很快就會發現，當你的滑鼠試圖點擊菜單裡的超連結的時候，菜單自動隱藏了，這完全不符合我們預期所想的，這也失去了菜單所具有的意義。
仔細斟酌一番後,也許你會改成這樣：
<div id="mymenu" onmouseover="showMenu()" onmouseout="hideMenu()" >
<a href="index.html">首頁</a>
<a href="navigate.html">導航</a>
<a href="news.html">新聞</a>
<a href="email.html">郵箱</a>
</div>
或者改成這樣：
<div id="mymenu" onmouseover="showMenu()" onmouseout="if(!this.contains(event.toElement))hideMenu()" >
<a href="index.html">首頁</a>
<a href="navigate.html">導航</a>
<a href="news.html">新聞</a>
<a href="email.html">郵箱</a>
</div>
以上兩種方法都能解決滑鼠試圖點超連結而菜單自動消失的問題，到這一步新的問題又出現了，當將滑鼠移入標題並且菜單顯示後，也許你會做以下幾件事情：
1.想讓菜單消失，於是不將滑鼠移入菜單而是直接從標題移出。
2.將滑鼠移入菜單，但沒有點超連結，此時想讓菜單消失，於是將滑鼠移出了菜單。
3.點擊菜單裡的超連結。
做了上述幾個動作後，其實你已經發現了問題：
1.當你想做事情1時，發現菜單並沒有消失，這是因為菜單的消失與否取決於id="mymenu"裡的onmouseout事件，從標題移出並沒有觸發這個事件，此菜單自然不會消失。
2.當你想做事情2時，如果你運氣夠好的話，菜單都會消失，但是如果你運氣不佳偏偏從菜單的上面移了出去此時你會發現菜單依然還在，並沒有消失，這是因為，雖然在滑鼠移出菜單的時候觸發了id="mymenu"裡的onmouseout事件並且onmouseout事件的確是運行了，但是由於是從菜單的上面移出的，所以，有99%的可能你都會再次經過那個標題，此時標題裡的onmouseover="showMenu()"事件又觸發了菜單又再次顯示了，這就是菜單未消失的原因，解決的方法是給id="title"的div裡添加一個onmouseout事件，也許你已經想到這一點了，於是急急忙忙的改成了這樣：
<div id="title" onmouseover="showMenu();" onmouseout="hideMenu();">這個是標題，請將滑鼠移上來</div>
如果你這樣寫，又會產生一個問題，當你試圖把滑鼠移入菜單時，菜單就會立即消失，因為移入菜單就意味著移出標題，移出標題就會觸發onmouseout="hideMenu()"這個事件。
所以正確的方法應該這樣寫：
<div id="title" onmouseover="showMenu();" onmouseout="if(this.toElement!=document.getElementById('mymenu')) hideMenu();">這個是標題，請將滑鼠移上來</div>
----------------------------------------------------------------------------------------------------------------------------
方法解釋：
event.toElement():返回離開事件來源對象的時候滑鼠所指向的那個對象。
object.contains(oElement):如果object包含oElement則返回true，否則返回false。
----------------------------------------------------------------------------------------------------------------------------
以下是完整的代碼：
<html>
<head>
<script type="text/javascript">
function showMenu()
{
document.all.mymenu.style.display="block";
}
function hideMenu()
{
document.all.mymenu.style.display="none";
}
</script>
<style type="text/css">
.title{
color:white;
font-weight:bold;
background:#006666;
width:100px;
height:25px;
border:5px double #006666;
text-align:center;
line-height:25px;
}
.mymenu{
padding-top:8px;
padding-bottom:8px;
text-align:center;
width:98px;
background:#fafafa;
border:1px solid #006666;
border-top:0xp;
border-bottom:2xp solid #006666;
z-index:10000;
display:none;
position:absolute;
}
.mymenu a{
width:100%;
height:25px;
text-decoration:none;
line-height:25px;
}
a:link,a:visited{
color:black;
}
a:hover{
color:gray;
background:#eaeaea;
}
</style>
</head>
<body>
<br><br><br><br>
<div>
<div class="title" id="title" onmouseover="showMenu();" onmouseout="if(event.toElement!=document.getElementById('mymenu'))hideMenu()" >導航</div>
<div class="mymenu" id="mymenu" onmouseout="if(!this.contains(event.toElement))hideMenu();" onmouseover="showMenu();">
<a href="#" >首頁</a><br/>
<a href="#" >協助</a><br/>
<a href="#" >導航</a><br/>
</div>
</div>
<br>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
