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. java回顾(项目前期的基本准备)

    一.     基础回顾 1   集合 1.1 集合的类型与各自的特性 ---|Collection: 单列集合 ---|List: 有存储顺序, 可重复 ---|ArrayList:  数组实现, 查 ...

  2. Windows服务时间控件怎么调试

    写了timer,调试的话在构造函数里面把Elapsed方法写成null,null就可以调试了 public PSJCService() { InitializeComponent(); Getuser ...

  3. Spark记录-Spark作业调试

    在本地IDE里直接运行spark程序操作远程集群 一般运行spark作业的方式有两种: 本机调试,通过设置master为local模式运行spark作业,这种方式一般用于调试,不用连接远程集群. 集群 ...

  4. 2018年11月25日ICPC焦作站参赛总结

    可能就这么退役了吧. 对这次ICPC还是比较有信心的,毕竟心态都放平和了. 路途很波折,热身赛还是赶上了. 等到了正赛的时候,开场看出了A题的签到,签到肯定是我来签的,11分钟签完了这道题之后,开始看 ...

  5. 小议 html 实体解析

    今天分享个小技巧,是群里一个朋友问的,"请问 + 这种类型的字符串怎么转换成我们想要的字符 + ,有什么简便的js方法吗"其实问题说简单也简单,说难也难.我们要分情况来描述问题解决 ...

  6. 20155303 2016-2017-2 《Java程序设计》第五周学习总结

    20155303 2016-2017-2 <Java程序设计>第五周学习总结 教材学习中的问题和解决过程 『问题一』:受检异常与非受检异常 『问题一解决』: 受检异常:这种在编译时被强制检 ...

  7. Spring Boot实战系列-----------邮件发送

    快速导航 添加Maven依赖 配置文件增加邮箱相关配置 Service.Test项目代码构建 五种邮件发送类型讲解 文本邮件 html邮件 附件邮件 html内嵌图片邮件 模板邮件 问题汇总 添加ma ...

  8. Paint House

    There are a row of n houses, each house can be painted with one of the k colors. The cost of paintin ...

  9. linux服务器账号密码正确无法登录

    登录服务器时,发现密码错误,输入后还是错误不能登录 最后发现登录日志中有pam_tally2(sshd:auth): user root (0) tally 53, deny 6 less /var/ ...

  10. linux常用运维命令【转】

    自己的小网站跑在阿里云的ECS上面,偶尔也去分析分析自己网站服务器日志,看看网站的访问量.看看有没有黑阔搞破坏!于是收集,整理一些服务器日志分析命令,大家可以试试! 1.查看有多少个IP访问: awk ...