CSS3 pointer-events: none. 由此回顾一下opacity:0, visibility:hidden, display:none
前言：图片设置了hover属性有遮罩，同时定位了一个h标签，由于布局原因，遮罩效果不能设置在图片和h标签的父元素上，这就导致，鼠标悬浮到图片上时有hover效果，但是漂到h文本上时，就无效果显示。
由上可知，这是因为h标签的定位原因，使堆叠顺序是大于img的原因。如果将h标签堆叠顺序改小，那它的文本同样也就看不到了，所以不行。
随之，百度之后了解一个css3属性 pointer-events: none；
pointer-events: none；禁止鼠标事件。（看得见，摸不着，占着位置，不触发事件）
可以让某个元素实现类似于海市蜃楼的效果，具体理解为，可以看的到某个元素，但是无法摸的着。如果再加上属性opacity：0；则可以很容易实现类似visibility：hidden；的效果（摸不着，看不见）
其他：
display: none; 隐藏。（看不见，摸不着，不占位置，不触发事件）
摸不着，而且也看不见，脱离文档流，不占据页面空间。
opacity: 0; 透明 （看不见，摸得着，占着位置，触发事件）
opacity指的是透明度，参数是0-1。
opacity=0则看不见，摸得着，不改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的。
visibility:hidden；只是隐藏内容（看不见，摸不着，占着位置，不触发事件）
不脱离文档流，会占据页面空间。但是不会触发该元素已经绑定的事件
详细介绍一下visibility:hidden
1.visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2.visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
<body> <div> <strong>给元素设置visibility:hidden样式</strong> <ol> <li>元素1</li> <li style="visibility:hidden;">元素2</li> <li>元素3</li> <li>元素4</li> </ol> </div> <div> <strong>给元素设置display:none样式</strong> <ol> <li>元素1</li> <li style="display:none;">元素2</li> <li>元素3</li> <li>元素4</li> </ol> </div> </body>
结果：
给元素设置visibility:hidden样式
1.元素1
3.元素3
4.元素4
给元素设置display:none样式
1.元素1
2.元素3
3.元素4
3.CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
