visibility: hidden; 和 opacity: 0; 的区别

[MangiDu]

先扔规范：

• css2 visibility
• css3 color opacity

visibility

hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

visibility 是用于规定被 html 元素生成的‘盒(box)’是否被渲染的。其值设置为 hidden 后，元素形成的盒仍会影响到布局但是该元素不可见，或者说没有被绘制。

这样就可以理解为什么鼠标点击相应区域不会触发事件了，因为点击没有实际地落在该元素上。

另一种使用 click() 的方法仍可以正常触发点击。

opacity

opacity 是css3增加的有关元素透明度的属性，它只决定以什么程度去混合这种渲染模式，而不会决定元素是否被渲染是否影响布局。