html遮罩层 点击消失,CSS遮罩层：hover状态丢失及解决方案

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时的效果图：