最近看到很多同学在实现鼠标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弹出菜单效果的更多相关文章

  1. html + js 右 点击 弹出 菜单

    页面 引用jar 包 <link rel="stylesheet" href="../../style/zui.min.css" type="t ...

  2. IOS实现弹出菜单效果MenuViewController(背景 景深 弹出菜单)

    在写项目时,要实现一个从下移上来的一个弹出菜单,并且背景变深的这么一个效果,在此分享给大家. 主要说一下思路及一些核心代码贴出来,要想下载源码, 请到:http://download.csdn.net ...

  3. js单击输入框后弹出提示信息效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Mui --- 弹出菜单

    mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...

  5. DirectUI界面编程(六)实现右键弹出菜单

    本节向大家介绍一下右键弹出菜单是如何实现的.效果如下,在窗口中点击鼠标右键弹出菜单,点击菜单项能够响应菜单点击事件. 使用Duilib库实现的弹出菜单,实际上也是一个Windows窗口,因此我们需要创 ...

  6. mui-popover显示、隐藏弹出菜单的方法

    一.mui-popover要显示.隐藏弹出菜单,可使用锚点方式. <div id="popover" class="box mui-popover mui-popp ...

  7. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css+html+js实现多级下拉和弹出菜单

    本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...

  9. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

随机推荐

  1. 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 ...

  2. javaScript call与apply学习笔记

    call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...

  3. 学习《零基础入门学习Python》电子书PDF+笔记+课后题及答案

    初学python入门建议学习<零基础入门学习Python>.适合新手入门,很简单很易懂.前一半将语法,后一半讲了实际的应用. Python3入门必备,小甲鱼手把手教授Python,包含电子 ...

  4. gcc---C/C++ 编译器

    gcc命令使用GNU推出的基于C/C++的编译器,是开放源代码领域应用最广泛的编译器,具有功能强大,编译代码支持性能优化等特点.现在很多程序员都应用GCC,怎样才能更好的应用GCC.目前,GCC可以用 ...

  5. 【玲珑杯 round#18 B】图论你先敲完模板

    [Link]:http://www.ifrog.cc/acm/problem/1146 [Description] [Solution] 设f[i]表示在第i个点休息的话最少需要的体力值; f[i]= ...

  6. HDU 3714 Error Curves

    Error Curves 思路:这个题的思路和上一个题的思路一样,但是这个题目卡精度,要在计算时,卡到1e-9. #include<cstdio> #include<cstring& ...

  7. Top 16 Java 应用类 - 这些功能再也不用自己写了

    Java中有很多应用类.这些类定义静态方法能够解决非常多常见的问题.以下是通过5万个开源项目统计得到的最热门的16个应用类. 类按热门程序排列.类的方法也是按热门程序排序. 浏览这个类能够看看有哪些功 ...

  8. amaze ui各个模块简单说明

    amaze ui各个模块简单说明 导航添加依据 http://amazeui.org/css/  下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1 ...

  9. Android框架之路——OkGo的使用

    一.简介 该库是封装了okhttp的标准RESTful风格的网络框架,可以与RxJava完美结合,比Retrofit更简单易用.支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数 ...

  10. maven项目引入sqljdbc4 找不到包的完美 解决方案

    今天碰到了这个问题,解决了,顺便做一下记录.首先来 重现 一下这个问题,maven install报错,说 找不到这个包,但是其实 我已经安装了. 我们 再来 看看 maven本地仓库里面有 什么,这 ...