利用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