CSS的几种消失机制

display: none

元素消失,不占据页面空间。会导致页面的重排和重绘。无法获取鼠标事件。

visibility: hidden

元素消失,占据页面空间。导致页面的重绘。无法获取鼠标事件。

opacity: 0

元素没有消失,只是看不见。导致页面的重绘。可获取鼠标事件。

position: reletive; left: -10000px;

元素定位在可视区域之外。导致该元素的重排和重绘。无法获取鼠标事件。

height:0 or width:0

若设置overflow:hidden,元素无法获取鼠标事件。若没有,元素宽高仍为0,但其子元素会撑破父元素,因此仍可以通过子元素获取到鼠标事件。

z-index:-1

很少用到这个,不过有同学提到了,因此还是列出来。

此外,这元素都可以用选择器定位到,可见仍是可进行DOM操作的元素。因此虽然无法获取鼠标事件,但可以用js来触发事件响应。例如用$('.item').click()即触发点击事件。