css3怎么实现点击隐藏div

ID:12839 / 打印
在css3中,可以利用“:active”选择器和display属性来实现点击隐藏div的效果,只需要给div元素添加“”

css3怎么实现点击隐藏div

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css3中,可以利用“:active”选择器和display属性来实现点击隐藏div的效果。

实现代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<style> 			div{ 				border: 1px solid red; 				background-color: #FFC0CB; 			} 			div:active{ 				display: none; 			}  		</style> 	</head> 	<body> 		<div>点击隐藏div元素</div>  	</body> </html>

1.gif

立即学习“前端免费学习笔记(深入)”;

:active选择器

active的英文解释为“积极的”,表现在鼠标上就是点击的意思。

将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。

(学习视频分享:css视频教程)

上一篇: CSS3变形是什么
下一篇: css3怎样实现改变宽度的动画效果

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。