元素隐藏的三种方式对比（针对移动端项目中的按钮，先隐藏且不能被点击 visibility:hidden）

元素隐藏的三种方式对比

1. display：none
2. opacity：0
3. visibility:hidden

项目需求

表面一个图片遮罩，鼠标hover遮罩消失，内部元素展现，其中有一个按钮在移动端是手指触摸到该区域就会立马跳转到指定链接而不会显示内部元素

display：none

不占据页面空间的不可见元素------相当于完全没有它，下方元素也会占据它的位置。
展示时 display：block 有界面的切换改变

opacity:0

透明度为0，视觉看不见，实际存在，元素的点击效果依然存在

visibility：hidden

不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击

专业请参考：前端瓶子君公众号
（地铁上看到了，刚好项目中需要使用这个）