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

最新推荐文章于 2023-05-18 10:02:27 发布

GG_Eric

最新推荐文章于 2023-05-18 10:02:27 发布

阅读量658

点赞数 1

分类专栏： csdn转载 css

csdn转载同时被 2 个专栏收录

68 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

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

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

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

简单的验证：

[html] view plain copy

print ?

<!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” onclick=“mouseevent()”>点击触发事件</div>
<div class=“invisibleDiv” onclick=“mouseevent()”>点击触发事件</div>
<div class=“visibleDiv” onclick=“mouseevent()”>鼠标点击触发事件</div>
</div>
<div class=“divHolder”>
<div class=“hiddenDiv” onmouseover=“mouseevent()”>覆盖触发</div>
<div class=“invisibleDiv” onmouseover=“mouseevent()”>覆盖触发</div>
<div class=“visibleDiv” onmouseover=“mouseevent()”>鼠标覆盖时触发事件</div>
</div>
</body>
</html>

<!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>