三种隐藏方式的区别

1.display:node:

元素在页面上将侧底小时，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的回流和重绘，父元素none，子元素block，子元素也不会出现

2.visibility:hidden:

和display:none的区别在于，元素在页面消失后，其占据的物理空间依旧会保留着，所以它指挥导致浏览器的重绘而不会回流。父元素hidden，子元素visible，子元素可以显示

3.opacity:0:

只是看不见元素，元素依然存在并且占有原有位置

注:

事件绑定差异

1.display:none:元素彻底消失，不会触发捆绑事件
2.visibility:hidden:无法接收js事件
3.opacity:0:可以接受js事件，只是相对于人眼是隐藏的

动画属性差异

1.display:none:完全不受transition属性影响，元素立即消失
2.visibility:hidden:消失时间跟transition属性设置的时间一样，但是没有动画效果
3.opacity:0:动画正常生效

visibility配合opacity和transtion可以实现真正的元素淡入淡出。如果只用opacity时，即使最后元素opacity变为0，但实现上该图片还是可以覆盖其他元素以及可以接受js效果。所以使用visibility可以实现元素真正的隐藏

#oShow{
    visibility: visible;
    opacity: 1;
    transition: 1s;
}
#oShow:hover{
    visibility: hidden;
    opacity: 0;
}