元素隱藏的三種方式對比

display：none

opacity：0

visibility:hidden

項目需求

表面一個圖片遮罩，鼠標hover遮罩消失，內部元素展現，其中有一個按鈕在移動端是手指觸摸到該區域就會立馬跳轉到指定鏈接而不會顯示內部元素

display：none

不占據頁面空間的不可見元素------相當于完全沒有它，下方元素也會占據它的位置。
展示時 display：block 有界面的切換改變

opacity:0

透明度為0，視覺看不見，實際存在，元素的點擊效果依然存在

visibility：hidden

不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊

專業請參考：前端瓶子君公眾號
（地鐵上看到了，剛好項目中需要使用這個）

總結

以上是生活随笔為你收集整理的元素隐藏的三种方式对比（针对移动端项目中的按钮，先隐藏且不能被点击 visibility:hidden）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。