CSS —— 元素hidden与opacity=0的区别

最新推荐文章于 2024-09-27 11:08:05 发布

Liekkas_BX

最新推荐文章于 2024-09-27 11:08:05 发布

阅读量9k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_19865749/article/details/52026264

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

之前调试页面时偶然发现，hidden与opacity看似都不可见，但实有区别：

visibility：hidden则相当于完全从文档流中删除了该元素，但所占据的尺寸仍然保留。

opacity：0则仅仅不可见，但仍可被浏览器发现，也就能触发各种事件。通过浏览器调试工具即可得出此结论。

简单的验证：

<!DOCTYPE html>
<html>
<head>
	<title>研究透明度与隐藏的区别</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			text-align: center;
		}
		.divHolder{
			display: inline-block;
			width: 200px;
			height: 300px;
			background-color: yellow;
			border:1px solid black;
		}
		.divHolder > div{
			display: block;
			width: 100%;
			height: 100px;
		}
		.hiddenDiv{
			visibility: hidden;
		}
		.invisibleDiv{
			opacity: 0.0;
		}
		.visibleDiv{
			background-color: gray;
		}
	</style>
	<script type="text/javascript">
		function mouseevent() {
			alert("触发了事件！");
		}
	</script>
</head>
<body>
	左右两个大div中各有三个小div，小div尺寸相同。
	第一个hidden，第二个opacity=0，第三个正常显示。
	通过调试窗口可发现，浏览器能发现不透明度为0的div，
	但发现不了隐藏的div！
	<div class="divHolder">
		<div class="hiddenDiv" οnclick="mouseevent()">点击触发事件</div>
		<div class="invisibleDiv" οnclick="mouseevent()">点击触发事件</div>
		<div class="visibleDiv" οnclick="mouseevent()">鼠标点击触发事件</div>

	</div>
	<div class="divHolder">
		<div class="hiddenDiv" οnmοuseοver="mouseevent()">覆盖触发</div>
		<div class="invisibleDiv" οnmοuseοver="mouseevent()">覆盖触发</div>
		<div class="visibleDiv" οnmοuseοver="mouseevent()">鼠标覆盖时触发事件</div>

	</div>
</body>
</html>