CSS实现元素显示和隐藏

已于 2022-04-12 16:47:04 修改
阅读量2.6k 收藏 8
点赞数
分类专栏： css 文章标签： html css css3
于 2021-12-01 08:57:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56712012/article/details/121640403
版权

让我来简单讲一讲css中元素的显示和隐藏是如何去实现的吧

css显示和隐藏

前言

CSS中元素标签的显示与隐藏可以通过对元素的css样式编写的过程中，在元素样式下以三种不同的属性进行显示与隐藏，通过对html标签进行显示与隐藏，从而实现web中特定的功能

1.display

display 设置或检索对象是否及如何显示

block：除了转换为块级元素之外，同时还有显示元素的意思。
none：（隐藏对象，不占有原来的位置）

在这里插入图片描述

2.visibility

visibility：visible ; 　元素可视
visibility：hidden; 　 元素隐藏,但占有自己原来的位置

在这里插入图片描述

3.overflow

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时ÿ

最低0.47元/天 解锁文章
吐个泡泡~~
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css显示隐藏元素的方法
kaiser010的博客
05-26 1012
在这个例子中，我们使用了一个复选框元素作为触发器。当这个复选框被选中时，被隐藏的元素就会显示出来。当复选框被选中时，它的兄弟元素#myDiv就会显示出来。在开发过程中有时候需要隐藏或显示某个元素，但是不能使用JavaScript来实现，以免影响浏览器的兼容性。其实通过css也可以实现显示隐藏元素，下面就详细介绍一下css显示隐藏元素的方法，如下。2.添加触发器，例如一个按钮或链接，使得用户点击时，被隐藏的元素会显示出来。要实现这个效果，需要使用CSS中的:checked伪类和 ~ 兄弟选择器。
css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
Echo_bx的博客
04-02 839
css元素的显示与隐藏display显示隐藏元素visibility显示隐藏元素overflow溢出显示隐藏 display显示隐藏元素 display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： display 隐藏元素后，不再占有原来的位置。 visibility显示隐藏元素 visibility 属性用于指定一个元素应可见还是隐藏。 visibility：visible ; 　元素可视
css定位、元素的显示与隐藏
最新发布
2302_80283616的博客
05-09 544
1. display 显示隐藏元素 但是不保留位置2. visibility 显示隐藏元素 但是保留原来的位置3. overflow 溢出显示隐藏 但是只是对于溢出的部分处理。
CSS实现元素显示与隐藏的方式整理
有事儿私信。
11-02 2634
在CSS中，有多种方法可以用来控制元素的显示和隐藏。displayvisibilityopacity和。理解这些属性的区别、使用场景以及如何使用它们是重要的CSS技能。
display:flex 下 overflow: hidden 不生效的；
qq_44051062的博客
11-01 950
display:flex 下 overflow: hidden 不生效的；
【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-15 4116
一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析 1、子绝父相 2、显示隐藏元素对象 3、鼠标经过样式设置 4、半透明遮罩设置 二、代码示例
CSS实现隐藏和显示功能的代码
01-21
CSS Code复制内容到剪贴板 <head> <meta http-equiv=content-type content=text/html;charset=utf-8> <style> .trans-fadeout{ -webkit-transition:all 1s linear; -moz-...
CSS 实现元素较宽不能被完全展示时将其隐藏的方法
09-27
本文将详细介绍如何使用CSS来实现当元素较宽不能被完全展示时将其隐藏。这个需求通常出现在固定宽度的容器内需要显示一系列可变长度的标签，例如文章分类或用户兴趣。 首先，我们来看一下问题的DOM结构： ```html ...
jQuery的显示和隐藏方法与css隐藏的样式对比
10-26
2. `show()`: 类似于`hide()`，`show()`用于显示隐藏的元素，同样可以接受时间参数来控制动画速度。它可以让隐藏的元素在指定时间内逐渐出现。 3. `slideToggle()`: 这个方法会在元素当前隐藏时滑动显示，显示时...
CSS控制DIV层显示和隐藏的实现方法
12-11
在CSS中，`display` 和 `visibility` 是两个关键的属性，它们被用来控制HTML元素，包括`div`层的显示与隐藏。虽然两者都可以达到隐藏元素的效果，但它们的作用机制有着本质的区别。 首先，`display` 属性主要用于...
输入密码时显示隐藏CSS3特效
04-06
本话题聚焦于一个常见的交互元素——“输入密码时显示隐藏CSS3特效”。这个特效是利用JavaScript（js）和层叠样式表（CSS3）来实现的一种功能，它允许用户在输入密码时切换显示或隐藏状态，提升用户在输入敏感信息时...
CSS盒子隐藏/显示后再最上层的实现代码
11-20
.imgbox{ width: 1200px; height: 612px; margin-right: auto; margin-left: auto; margin-top: 60px; } .m1{ border: solid; border-width: 1px; height: 300px; width: 227px; } #m1img{ text-align:center; padding-top: 55px; } #img2{ margin-bottom: 35px; } p>span { text-decoration:line-thro
CSS盒子模型隐藏的几种方式
一个非常Cool的人
01-26 2839
讲述了隐藏盒子的三种方式,不包含其余的属性。直击要点，附有代码助于大家理解。欢迎大家批评指正。
点击按钮切换显示和隐藏，点击空白处隐藏盒子
QSWの
07-21 1378
点击按钮切换显示和隐藏，点击空白处隐藏盒子
用CSS实现"点击"显示隐藏效果
weixin_34029680的博客
05-08 8855
CSS实现点击下拉,看清楚题目哦，是点击下拉。不是hover下拉。 <style lang=""> ul>li>ul{ display: none; } input[type=checkbox]{ display: none; } ul li input[type=checkbox]:checked+ul{...
用HTML和CSS实现点击内容显示再点击隐藏
weixin_34290096的博客
09-02 3042
实现思路： 1.display:none,隐藏元素;点击时display:black; 2.设置隐藏元素高度为0，overflow:hidden;点击时overflow:visible; 由于第一条只能实现点击时显示，不能实现继续隐藏；排除方法1。 考虑复选框特性，点击时样式框内有小勾，再点击时小勾消失。 HTML实现代码： <div> &l...
[css] 元素的隐藏和显示
adisMadman的博客
04-20 535
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新界面，会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 一：display属性 display属性用于设置一个元素应如何显示： display：none；隐藏对象 display：block；除了转换为块级元素以外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置 二：visibility可见性 visibility属性用于指定一个元素应可见还是隐藏 visibility：visible；元素可视 visib
html + css 实现元素隐藏 鼠标悬浮显示
05-24
可以使用 CSS 的 `display` 属性和 `:hover` 伪类来实现元素隐藏和鼠标悬浮显示的效果。 首先，将需要隐藏的元素的 `display` 属性设置为 `none`，这样该元素就会被隐藏起来。例如： ```css .hide { display: none; } ``` 接着，在需要触发显示的元素上使用 `:hover` 伪类，将需要显示的元素的 `display` 属性设置为 `block` 或其他适合的属性值。例如： ```css .show:hover + .hide { display: block; } ``` 这里使用了相邻兄弟选择器 `+`，表示当鼠标悬浮在 `.show` 元素上时，下一个兄弟元素（即 `.hide` 元素）会被显示出来。 完整的代码示例： ```html <div class="container"> <div class="show">鼠标悬浮显示</div> <div class="hide">隐藏元素</div> </div> <style> .hide { display: none; } .show:hover + .hide { display: block; } </style> ``` 这样，当鼠标悬浮在 `.show` 元素上时，`.hide` 元素就会被显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值