文档章节

利用mouseover和mouseout这两个鼠标事件调用js做下拉菜单

 恐空控
发布于 2013/07/28 23:36
字数 817
阅读 5769
收藏 5

      简单说下这个问题吧比如我们随意打开一个文件夹时,将鼠标放在工具栏文件按钮并点击时,下面会弹出一个下拉菜单 有新建、打开和保存等功能。这个功能看起来很简单,但是很多初学者去写代码时却发现,其实没那么简单,本以为只需要调用一个mouseover和mouseout鼠标事件在结合两个相应打开和关闭下拉表所在div的js代码代码就搞定了的事怎么做起来确感觉有点不对。很多人可能出现过以下问题:明明设定的是下拉列表所在块在鼠标其离开这个块时才消失的,怎么鼠标还在这个块上面只不过动了下鼠标,可是这个块确没了,其实这个原因很简答:因为这个mouseout 事件针对的对象仅仅是设定这个鼠标离开事件的块,只要离开了这个块,不过鼠标是在这个块内部的内嵌还是块元素上都算离开了。当然最开始鼠标在这个块内部的元素上是不会执行mouseout引用的这个命令的,从第二个就开始执行了,下边我将我的代码给大家分享一下,很简单我只不过是把当鼠标离开这个块时的js关闭方法放到了其父级li元素上调用 ,这个问题就解决了 ,废话我就不多说了。大家一看代码便知道了,代码看起来很长内容很简单,就是大致写了下样式占了不少行,只需要把代码全部复制过去运行一下就可以知道结果了。

<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";     }

</script> </body> </html

© 著作权归作者所有

粉丝 10
博文 22
码字总数 7160
作品 0
成都
私信 提问
jQuery 事件:MouseOver/MouseOut vs MouseEnter/MouseLeave

Javascript 开发者经常用MouseOver和MouseOut事件来触发用户鼠标进入或者移出某个HTML元素的事件。对于任何试图使用这种方式处理的人来说,你知道这个方式还不错,但是你没有想到其实那样会有...

晨曦之光
2012/03/21
5.4K
0
JS/jquery实现鼠标事件控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一...

GavinHsueh
2018/05/21
526
3
使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

原文链接:http://js8.in/407.html 导言 之前在开发普加09年国庆中秋祝福页面复制链接功能时,遇见在Firefox,Chrome,Opera,Safari能复制链接的兼容性问题,而在近期上线的普加地图产品中使...

bigfish__
2012/06/29
226
0
JS/jquery实现鼠标控制页面元素显隐

对于鼠标指针的移入和移出,就涉及到了mouseover、mouseout和mouseleave事件。 mouseover:当鼠标指针移到目标元素时触发该事件; mouseout:当鼠标指针移出目标元素或其子元素时,都会触发该...

GavinHsueh
2018/05/21
0
0
html5 + css3 带音效下拉菜单的实现

原文:scripts tutorials (来自脚本教程网的教程,翻译可能有些不对。。。想要试试 音效下拉菜单 在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3)。下拉菜单有css3动画效...

phala
2015/08/06
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在做 Taro 适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 解决跨域问题 h5 发请求会报跨域问题,需...

dkvirus
57分钟前
4
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
3
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部