利用mouseover和mouseout這兩個鼠標事件調用js作下拉菜單

時間 2019-11-13

標籤利用 mouseover mouseout 兩個鼠標事件調用下拉菜單欄目 JavaScript 简体版

原文原文鏈接

簡單說下這個問題吧好比咱們隨意打開一個文件夾時，將鼠標放在工具欄文件按鈕並點擊時，下面會彈出一個下拉菜單有新建、打開和保存等功能。這個功能看起來很簡單，可是不少初學者去寫代碼時卻發現，其實沒那麼簡單，本覺得只須要調用一個mouseover和mouseout鼠標事件在結合兩個相應打開和關閉下拉表所在div的js代碼代碼就搞定了的事怎麼作起來確感受有點不對。不少人可能出現過如下問題：明明設定的是下拉列表所在塊在鼠標其離開這個塊時才消失的，怎麼鼠標還在這個塊上面只不過動了下鼠標，但是這個塊確沒了，其實這個緣由很簡答：由於這個mouseout 事件針對的對象僅僅是設定這個鼠標離開事件的塊，只要離開了這個塊，不過鼠標是在這個塊內部的內嵌仍是塊元素上都算離開了。固然最開始鼠標在這個塊內部的元素上是不會執行mouseout引用的這個命令的，從第二個就開始執行了，下邊我將個人代碼給你們分享一下，很簡單我只不過是把當鼠標離開這個塊時的js關閉方法放到了其父級li元素上調用，這個問題就解決了，廢話我就很少說了。你們一看代碼便知道了，代碼看起來很長內容很簡單，就是大體寫了下樣式佔了很多行，只須要把代碼所有複製過去運行一下就能夠知道結果了。 javascript

 <html> <head>     <title>用mouseover事件和mouseout事件時間作下拉菜單</title>     <style type="text/css">         #sumlist{             float: left;             margin-top:100px;             margin-left:200px;             width: 160px;             background-color: #f46317;             list-style-type: none;         }         .ul{             float: left;             margin-left: -40px;             width: 200px;             height:30px;             line-height: 30px;             text-indent: 20px;             background-color: orange;         }         .ul:hover{             background-color: #f46317;         }         .li{             display: none;             margin-top: -30px;             width: 160px;             margin-left: -40px;         }         .li li{             float: left;             margin-left:200px;             width: 200px;             height:30px;             background-color: #dbdbdb;             list-style-type: none;         }         .li li:hover{             background-color: #f4a561;         }     </style> </head> <body> <ul id='sumlist'>     <li onmouseover="openlist(0)" class="ul" onmouseout="closelist(0)">         <label>菜單</label>         <ul class="li">             <li>新建</li>             <li>打開</li>             <li>保存</li>             <li>另存爲</li>         </ul>     </li>     <li onmouseover="openlist(1)" class="ul" onmouseout="closelist(1)">         <label>編輯</label>         <ul class="li">             <li>複製</li>             <li>刪除</li>             <li>剪切</li>             <li>粘貼</li>             <li>撤銷</li>         </ul>     </li>     <li onmouseover="openlist(2)" class="ul" onmouseout="closelist(2)">         <label>查看</label>         <ul class="li" >             <li>狀態欄</li>             <li>超大圖標</li>             <li>詳細信息</li>             <li>平鋪</li>             <li>刷新</li>         </ul>     </li>     <li onmouseover="openlist(3)" class="ul" onmouseout="closelist(3)">         <label>幫助</label>         <ul class="li" >             <li>查看幫助</li>             <li>關於***</li>             <li>這***合法嗎 </li>         </ul>     </li>     <li onmouseover="openlist(4)" class="ul" onmouseout="closelist(4)">         <label>工具</label>         <ul class="li" >             <li>打開同步中心</li>             <li>文件夾選項</li>         </ul>     </li> </ul> <script type="text/javascript">     //爲了節省代碼暫時把經過class得到對象弄成一個方法     function $(eve){         return document.getElementsByClassName(eve);     }     var t=null;     //打開下拉菜單     function openlist(i){         var objdiv=$("li");         objdiv[i].style.display="block";     }     //關閉下拉菜單     function closelist(i){         var objdiv=$("li");         objdiv[i].style.display="none";     } css

 </script> </body> </html html