ccs中display:none visibility:hidden opacity:0的区别

╰半橙微兮° 2022-07-19 01:53 129阅读 0赞

\{ display: none; /\* 不占据空间，无法点击 \*/ \}

\{ visibility: hidden; /\* 占据空间，无法点击 \*/ \}

\{ opacity: 0;  /\* 占据空间，可以点击 \*/ \}

[相关文章   
][Link 1]

判断visibility:hidden与opacity:0是否可可以点击的代码：

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style>  
div  
\{  
width:200px;  
height:200px;  
border:2px solid red;  
\}  
  
  
.one  
\{  
background-color:blue;  
display:none;  
\}  
  
  
.two  
\{  
background-color:yellow;  
visibility:hidden;  
\}  
  
  
.three  
\{  
background-color:red;  
opacity:0;  
  
  
  
  
\}  
</style>  
<script src="jquery.js"></script>  
<script>  
jQuery(document).ready(function(e) \{  
    $(".two").click(  
function()  
\{  
alert("这是visibility");  
\}  
);  
$(".three").click(  
function()  
\{  
alert("这是opacity");  
\}  
);  
  
\});  
</script>  
</head>  
  
  
<body>  
<div class="one"></div>  
<div class="two"></div>  
<div class="three"></div>  
<p>这是末尾段落</p>  
</body>  
</html>

[Link 1]: http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/