如何不使用js实现鼠标hover弹出菜单效果
最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素。
<ul>
<li>主页</li>
<li>新闻</li>
<li id="more">更多</li>
<div class="menu" id="menu">
<ul>
<li>退出登录</li>
<li>更改密码</li>
</ul>
</div>
</ul>
<style>
.menu{
display: none;
}
</style>
<script>
window.onload=function(){
var menu=document.getElementById('menu');
var more=document.getElementById('more');
more.addEventListener('mouseenter',function(){
menu.style.display="block";
});
more.addEventListener('mouseleave',function(){
menu.style.display="none";
});
}
</script>
这种写法是比较流行的写法,但这种写法需要用到js,多多少少有一点不优雅。现在笔者向大家介绍一种使用css伪类结合子代选择器的方式来实现同样效果的办法。
1.首先需要改变一下dom结构,弹出菜单div和按钮之间改成父子结构
<ul>
<li>主页</li>
<li>新闻</li>
<li id="more" class="more">
<span>更多</span>
<div class="menu" id="menu">
<ul>
<li>退出登录</li>
<li>更改密码</li>
</ul>
</div>
</li> </ul>
2.将之前的script代码统统删掉,改用css伪类和子代选择带
.menu {
display: none;
}
.more:hover>.menu{
display: block;
}
就这样就完成啦,代码比之前精简了不少,少了很多js变量,还不用担心dom事件绑定与解绑的问题。
如果想要有更好的用户体验,还可以加上css3的过渡动画。但需要注意的是元素默认display:none的话是不会有动画效果的,需要把display:none;改成visibility:hidden;
而且最好让.menu脱离文档流,比方说给它的position设置成fixed或者absolute,使用transform而不是left、top,这样动画会有更好的性能。
如何不使用js实现鼠标hover弹出菜单效果的更多相关文章
- html + js 右 点击 弹出 菜单
页面 引用jar 包 <link rel="stylesheet" href="../../style/zui.min.css" type="t ...
- IOS实现弹出菜单效果MenuViewController(背景 景深 弹出菜单)
在写项目时,要实现一个从下移上来的一个弹出菜单,并且背景变深的这么一个效果,在此分享给大家. 主要说一下思路及一些核心代码贴出来,要想下载源码, 请到:http://download.csdn.net ...
- js单击输入框后弹出提示信息效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Mui --- 弹出菜单
mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...
- DirectUI界面编程(六)实现右键弹出菜单
本节向大家介绍一下右键弹出菜单是如何实现的.效果如下,在窗口中点击鼠标右键弹出菜单,点击菜单项能够响应菜单点击事件. 使用Duilib库实现的弹出菜单,实际上也是一个Windows窗口,因此我们需要创 ...
- mui-popover显示、隐藏弹出菜单的方法
一.mui-popover要显示.隐藏弹出菜单,可使用锚点方式. <div id="popover" class="box mui-popover mui-popp ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css+html+js实现多级下拉和弹出菜单
本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
随机推荐
- Chromium Graphics: HW Video Acceleration in Chrom{e,ium}{,OS}
HW Video Acceleration in Chrom{e,ium}{,OS} Ami Fischman <fischman@chromium.org> Status as of 2 ...
- javaScript call与apply学习笔记
call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...
- 学习《零基础入门学习Python》电子书PDF+笔记+课后题及答案
初学python入门建议学习<零基础入门学习Python>.适合新手入门,很简单很易懂.前一半将语法,后一半讲了实际的应用. Python3入门必备,小甲鱼手把手教授Python,包含电子 ...
- gcc---C/C++ 编译器
gcc命令使用GNU推出的基于C/C++的编译器,是开放源代码领域应用最广泛的编译器,具有功能强大,编译代码支持性能优化等特点.现在很多程序员都应用GCC,怎样才能更好的应用GCC.目前,GCC可以用 ...
- 【玲珑杯 round#18 B】图论你先敲完模板
[Link]:http://www.ifrog.cc/acm/problem/1146 [Description] [Solution] 设f[i]表示在第i个点休息的话最少需要的体力值; f[i]= ...
- HDU 3714 Error Curves
Error Curves 思路:这个题的思路和上一个题的思路一样,但是这个题目卡精度,要在计算时,卡到1e-9. #include<cstdio> #include<cstring& ...
- Top 16 Java 应用类 - 这些功能再也不用自己写了
Java中有很多应用类.这些类定义静态方法能够解决非常多常见的问题.以下是通过5万个开源项目统计得到的最热门的16个应用类. 类按热门程序排列.类的方法也是按热门程序排序. 浏览这个类能够看看有哪些功 ...
- amaze ui各个模块简单说明
amaze ui各个模块简单说明 导航添加依据 http://amazeui.org/css/ 下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1 ...
- Android框架之路——OkGo的使用
一.简介 该库是封装了okhttp的标准RESTful风格的网络框架,可以与RxJava完美结合,比Retrofit更简单易用.支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数 ...
- maven项目引入sqljdbc4 找不到包的完美 解决方案
今天碰到了这个问题,解决了,顺便做一下记录.首先来 重现 一下这个问题,maven install报错,说 找不到这个包,但是其实 我已经安装了. 我们 再来 看看 maven本地仓库里面有 什么,这 ...