CSS —— 元素hidden與opacity=0的區別
阿新 • • 發佈：2019-02-18
之前除錯頁面時偶然發現，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" 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>