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. svn问题汇总

    1 svn图标 2 问题 SVN删除文件 一.本地删除SVN删除文件中的本地删除,指的是在客户端delete了一个文件,但还没有commit,使用revert来撤销删除. 二.服务器删除1.通过本地删 ...

  2. 汉诺塔hanoi

    问题描述: 有一个梵塔,塔内有三个座A.B.C,A座上有诺干个盘子,盘子大小不等,大的在下,小的在上(如图). 把这些个盘子从A座移到C座,中间可以借用B座但每次只能允许移动一个盘子,并且在移动过程中 ...

  3. Java基础-爬虫实战之爬去校花网网站内容

    Java基础-爬虫实战之爬去校花网网站内容 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 爬虫这个实现点我压根就没有把它当做重点,也没打算做网络爬虫工程师,说起爬虫我更喜欢用Pyt ...

  4. Spark记录-Scala循环语句

    Scala while循环语句 当给定条件为真时,while循环重复一个语句或一组语句.它在执行循环体之前测试条件状态. 只要给定的条件为真,while循环语句重复执行目标语句. object Dem ...

  5. LVS原理详解(3种工作模式及8种调度算法)

    2017年1月12日, 星期四 LVS原理详解(3种工作模式及8种调度算法)   LVS原理详解及部署之二:LVS原理详解(3种工作方式8种调度算法) 作者:woshiliwentong  发布日期: ...

  6. gdb初步窥探

    本文是通过学习左耳朵皓帝的文章,详见:http://blog.csdn.net/haoel 1.使用gdb gdb主要是用来调试c和c++程序,首先在编译前我们先把调试信息加到可执行程序当中,使用参数 ...

  7. 阿里云Linux服务器安装 nginx+mysql+php

    阿里云Linux服务器安装 nginx+mysql+php步骤1.登录服务器2.下载安装包3.将安装包上传到服务器的/home目录下 注:使用rz sz命令进行本地和服务器间的上传.下载,安装命令yu ...

  8. JavaScript绝句的小研究

    前几日在网上看到一篇文章:JavaScript绝句,看了以后觉得里面的代码颇为有趣,不过文章里面只是简单的说了这样写的目的和结果,却没有令读者起到既知其然,又知其所以然的效果.这里简单写一篇小文章剖析 ...

  9. Linux - awk 文本处理工具三

    AWK 文件打印匹配 格式示例 awk '/Tom/' file # 打印匹配到得行 awk '/^Tom/{print $1}' # 匹配Tom开头的行 打印第一个字段 awk '$1 !~ /ly ...

  10. 对git简单的认识

    了解git工作区.暂存区.版本库: 其中,使用 git add .就是将文件添加到了暂存区:而git commit -m ‘desc’:将暂存区的文件添加到版本库: 每次更新项目的步骤: 1)每次更新 ...