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. 域名、ip、以及通过域名访问网站、虚拟主机

    ip 是一个网站的id,是它的地址. 域名是为了解决ip比较难记住才引出的. 利用nginx来配置虚拟主机,通过域名可以访问该网站. 具体实现详见前面文章. 虚拟主机:可以实现在一台服务器虚拟出多个网 ...

  2. Qt ------ UDP发送不了或接收不到问题

    1.禁用不需要的网卡,比如禁用虚拟机网卡. 2.向所有网卡广播数据 /* * 直接调用 QUdpSocket 的 writeDatagram() 函数发送数据,如果有多张网卡(装了虚拟机会增加网卡), ...

  3. SQL Server 查询性能优化——覆盖索引

    覆盖索引又可以称为索引覆盖. 解释一: 就是select的数据列只用从索引中就能够取得,不必从数据表中读取,换句话说查询列要被所使用的索引覆盖. 解释二: 索引是高效找到行的一个方法,当能通过检索索引 ...

  4. SQL2005分页存储过程(支持多表联接)

    Code /*********************************************************   * 作    用:数据分页(完整SQL分页存储过程(支持多表联接)) ...

  5. DataGridView刷新数据

    在DataGridView上操作数据之后,无论是增删改都是对数据库进行了操作,而DataGridView这个控件在操作之后是不会变化的,需要重新的去数据库里读取一下数据才行,可以理解为之刷新 Data ...

  6. Java入门系列(六)方法

    方法返回多个值 使用集合类 /** * 方法1:使用集合类 (Map以外的集合类也可以随意使用) * 目标:返回一个数组的最大值和最小值 */ public Map<String, Intege ...

  7. JavaScript内部原理实践——真的懂JavaScript吗?(转)

    通过翻译了Dmitry A.Soshnikov的关于ECMAScript-262-3 JavaScript内部原理的文章, 从理论角度对JavaScript中部分特性的内部工作机制有了一定的了解. 但 ...

  8. Linux - awk 文本处理工具二

    awk 判断格式 awk '{print ($1>$2)?"第一排"$1:"第二排"$2}' # 条件判断 括号代表if语句判断 "?" ...

  9. 200行代码实现RPC框架

    之前因为项目需要,基于zookeeper和thrift协议实现了一个简单易用的RPC框架,核心代码不超过200行. zookeeper主要作用是服务发现,thrift协议作为通信传输协议, 基于com ...

  10. flask_sqlalchemy的使用

    第一配置文件 # coding:utf-8 DIALECT = 'mysql' DRIVER = 'pymysql' USERNAME = 'root' PASSWORD = ' HOST = '12 ...