3种纯css方法控制元素隐藏显示
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方法控制元素隐藏显示的更多相关文章
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)
css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...
- legend3---19、要更多的从服务器端控制元素的显示和隐藏,而不要是页面端
legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- jquery控制css的display(控制元素的显示与隐藏)
使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...
- 鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态
需求:当鼠标移动到一个元素A身上时,另外一个元素B显示. 实现原理: A元素与B元素有一个相同的父级. B元素默认隐藏,A元素默认显示. 当鼠标移动到A元素身上时,也可以看做是移动到了A元素的父级身上 ...
- css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
随机推荐
- requestMapping之地址映射
转:http://www.cnblogs.com/qq78292959/p/3760560.html 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时, ...
- Python 文件解压缩
shutil对压缩包的处理是通过调用zipFile和tarFile两个模块来进行的. import zipfile # zipfile压缩 z = zipfile.ZipFile('ss.zip', ...
- python爬虫 抓取一个网站的所有网址链接
sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...
- MingW-v4.8.0+EDE-v13.04 配置使用C语言图形库
From: http://www.cnblogs.com/killerlegend/p/3946768.html Author:KillerLegend Date:2014.8.30 MingW的配置 ...
- 【官方文档】Nginx模块Nginx-Rtmp-Module学习笔记(一) RTMP 命令详解
源码地址:https://github.com/Tinywan/PHP_Experience 说明: rtmp的延迟主要取决于播放器设置,但流式传输软件,流的比特率和网络速度(以及响应时间“ping” ...
- CSS规范 - 优化方案--(来自网易)
值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面 ...
- Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发
LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件.利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用! 本文由前端交流QQ群管理员—— ...
- vue中,写在methods里的B方法去调A方法的数据,访问不到?
今天在写项目的时候,发现了一个京城性忽略的问题,在vue的methods的方法里面定义了两个方法,如下: getTaskList() { api.growthDetails.taskList({ ap ...
- 【API】注册表编程基础-RegCreateKeyEx、RegSetValueEx
1.环境: 操作系统:Windows 10 x64 编译器:VS2015 2.关键函数 LONG WINAPI RegCreateKeyEx( _In_ HKEY hKey, _In_ LPCTSTR ...
- 【C语言】十六进制形式输出应用程序
1.前言 最近在看到同事写了一款封印病毒的程序,非常有意思!原理大致是将PE文件中的ASCII转换成HEX输出到文本中.这样做的目的是为了保存病毒样本的时候不会被杀毒软件查杀!然而却是delphi写的 ...