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