今天又看到一个坑爹的CSS属性，即标题所说。以前一直用的是display：none。然后我试了下那篇文章上说的。设置了下visivblity:hidden的效果。最开始让我有点儿想当然了
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
.test1 {
width: 300px;
height: 300px;
background: red;
float: left;
visibility: hidden;
}
.test2 {
width: 300px;
height: 300px;
background: green;
float: left;
}
</style>
<script>
window.onload = function() {
document.getElementById("div1").onclick = function() {
alert("OK");
};
}
</script>
</head>
<body>
<div class="test1" id="div1">
</div>
<div class="test2">
</div>
</body>
</html>
感觉上是不就是opacity设置为0的效果吗？如果是的话，那么我给它设置事件，在opacity为0的条件下点击会有事件响应的，但是我加上事件之后，发现并不是的。
于是得出结论visibility:hidden介于display:none和opacity:0之间。
我暂时没有找到这个的用处，不过常见的自定义上传按钮，就是在一个背景图片上放一个<input type="file" />，然后将它的opacity置为0，这样就比较美观大方了。
2967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
