CSS遮罩层，顾名思义就是在div上，再“铺”一层半透明的div。在hover时，亦可进一步改变该遮罩层的色彩和透明度。我们可以通过css定位和背景色实现。
CSS遮罩层实现及hover状态丢失问题
CSS代码：
.block {
position: relative;
top: 100px;
left: 100px;
display: inline-block;
width: 300px;
border-radius: 4px;
border:1px solid ;
}
.block__overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.block:hover .block__overlay {
background-color: rgba(100, 200, 0, .5);
}
Html代码：
在Mouse hover时，如果快速点击鼠标，可能会丢失mouse hover的效果。这在windows上的浏览器经常出现，造成闪烁。虽然在macbook上出现的时候很少。
解决方案：点击鼠标时，添加isActive 样式，强制显示hover里的样式。等mouse out时，去掉isActive class。
普通状态下的效果：
鼠标Hover时的效果图：
