1.通过hover,也是最常用的方式。此方法要求按钮与被控制元素必须有层级关系。(兼容低端浏览器常用)

    <div class="nav-btn">
<h2>按钮</h2>
<ul class="nav-box">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</div>
        *{
padding:;
margin:;
}
ul,li{
list-style: none;
}
.nav-btn{
position: relative;
}
.nav-btn h2{
height: 60px;
line-height: 60px;
width: 130px;
text-align:center;
background: #ff0;
}
.nav-box{
position: absolute;
top:60px;
left: 0px;
display: none;
}
.nav-btn:hover .nav-box{
display: block;
}

2.通过:focus点击按钮显示,点击空白处隐藏。此方通同样需要按钮与被控制元素之间存在层级关系。(需用到CSS3选择器)

    <div class="nav-btn">
<button>按钮</button>
<ul class="nav-box">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</div>
        *{
padding:;
margin:;
}
ul,li{
list-style: none;
}
.nav-btn{
position: relative;
}
.nav-btn h2{
height: 60px;
line-height: 60px;
width: 130px;
text-align:center;
background: #ff0;
}
.nav-box{
position: absolute;
top:60px;
left: 0px;
display: none;
}
.nav-btn button:focus ~ .nav-box{
display: block;
}

3.利用label的for属性绑定checkbox,此方法对按钮与盒子的层级关系没有限制(需用到CSS3选择器)

    <label for="control" class="nav-btn">菜单</label>
<div>
<input type="checkbox" name="" id="control" class="nav-con">
<ul class="nav-box">
<li><a href="#">首页</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
        ul,li{
list-style: none;
}
*{
padding:;
margin:;
}
.nav-con{
display: none;
}
.nav-box{
display: none;
}
.nav-con:checked ~ .nav-box{
display: block;
}
.nav-btn{
padding: 10px 15px;
background:;
}

3种纯css方法控制元素隐藏显示的更多相关文章

  1. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  2. css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  3. legend3---19、要更多的从服务器端控制元素的显示和隐藏,而不要是页面端

    legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...

  4. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  5. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  6. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  7. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  8. 鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态

    需求:当鼠标移动到一个元素A身上时,另外一个元素B显示. 实现原理: A元素与B元素有一个相同的父级. B元素默认隐藏,A元素默认显示. 当鼠标移动到A元素身上时,也可以看做是移动到了A元素的父级身上 ...

  9. css鼠标悬浮控制元素隐藏与显示

    在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...

随机推荐

  1. Nginx反向代理1--基本介绍-虚拟主机

    1   Nginx 1.1   什么是nginx Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发, ...

  2. linux 系统文件类型、系统安装时间、系统启动时间、系统运行时间、设置及显示时间、系统时间和硬件时间

    系统文件类型: 1) $mout 2) df -l:仅列出本地文件系统:-h (--human-readable):-T:文件系统类型 $df -lhf 3) file -s (--special-f ...

  3. 【原创】backbone1.1.0源码解析之Collection

    晚上躺在床上,继续完成对Backbone.Collection的源码解析. 首先讲讲它用来干嘛? Backbone.Collection的实例表示一个集合,是很多model组成的,如果用model比喻 ...

  4. <header><footer>引用

    示例:http://www.w3school.com.cn/html/html_layout.asp

  5. 字符串格式化(百分号&format)

    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号方式: %[(name)][flags][width].[precision]typecode [  ]:表示 ...

  6. mac rsync文件传输

    rsync -avz filename servername:/filename --exclude '*.log' --exclude '*.pyc' --exclude '*.db' --excl ...

  7. Jenkins与代码上线解决方案

    Jenkins是一个用Java编写的开源的持续集成工具.在与Oracle发生争执后,项目从Hudson项目独立. Jenkins提供了软件开发的持续集成服务.它运行在Servlet容器中(例如Apac ...

  8. Java环境的搭建及用记事本来揭露下JDK到底做了些什么

    和我一样的新手想学Java就从自己搭建环境开始,请看完这边文章,我搜集资料的整合. Java的标准版本是Java SE,所说的JDK(Java Development Kits)就是Java SE的开 ...

  9. redis,nodejs,php,pub/sub 实战: 微信语音识别

    2015年5月22日 20:20:20 星期五 效果: 这边对微信说话,  浏览器端及时显示语音识别的文字 注意: 在连接socket.io时, 按下浏览器f12, 如果一直有请求不断的刷, 说明so ...

  10. 五、vue状态管理模式vuex

    一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...