文档章节

如何不使用js实现鼠标hover弹出菜单效果

violinux666
 violinux666
发布于 2018/12/28 14:51
字数 520
阅读 600
收藏 15

最近看到很多同学在实现鼠标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,这样动画会有更好的性能。

© 著作权归作者所有

共有 人打赏支持
violinux666
粉丝 8
博文 8
码字总数 9981
作品 2
深圳
程序员
私信 提问
加载中

评论(3)

9
92年的java
http://www.jujingyun.com 北京网站建设
http://www.shjuntang.com 上海装潢
S三少S
S三少S
看成不使用hover使用js了。。。
湖水没了
湖水没了
不错 我的cms官网菜单就是这样做的
最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1
2012/07/10
4.5K
12
前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单   在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(...

grootzhang
2016/05/18
0
0
30 Seconds of CSS代码块解读(互动篇与其他)

30 Seconds of CSS代码块解读(互动篇与其他) 这是最后一篇解读,主要还是集中在优化交互方面,比如禁止选中、弹出框、通过伪元素排除元素进行淡出等。 虽然该开源项目总结的代码块不多,但大...

坤少卡卡
2018/07/04
0
0
html5 + css3 带音效下拉菜单的实现

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

phala
2015/08/06
0
0
导航菜单高亮显示防刷新--JS特效

防刷新导航菜单高亮显示,这是基于javascript的cookie技术实现的,就是跳转了URL还是有高亮效果的,很不错 就像 牛淘返利网 导航菜单一样 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra...

西西爱OS
2012/10/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

eggjs与sequelize简单demo

参考 egg 官方文档 安装 // 依赖npm install --save egg-sequelize mysql2// ts 类型npm install --save @types/sequelize 插件,config/plugin.ts import { EggPlugin } from 'egg';......

Geeyu
38分钟前
1
0
看过上百部片子的这个人教你视频标签算法解析

本文由云+社区发表 随着内容时代的来临,多媒体信息,特别是视频信息的分析和理解需求,如图像分类、图像打标签、视频处理等等,变得越发迫切。目前图像分类已经发展了多年,在一定条件下已经...

腾讯云加社区
53分钟前
2
0
2. 红黑树

定义:红黑树(Red-Black Tree,简称R-B Tree),它一种特殊的二叉查找树(Binary Search Tree)。 要理解红黑树,先要了解什么是二叉查找树。在上一章中,我们学习了什么是二叉树,以及二叉树...

火拳-艾斯
54分钟前
3
0
input的button类型,点击页面跳转

一、input type=button 不做任何操作 例如: <input type="button" class="btn btn-primary" style="width: 30%" value="返回" onclick="window.location.href='/users/list'"></input> onc......

Sunki
今天
1
0
踩坑:js 小数运算出现精度问题

背景 在学习小程序商城源码时发现了这个问题,单价可能出现小数,小数之间运算结果会莫名其妙多出一大串数字,比如下面这样👇。 在此之前我是知道 js 中著名的 0.1 + 0.2 != 0.3 的问题的,...

dkvirus
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部