本文详细探讨了CSS遮罩层在HTML中的实现，特别是在鼠标悬停时遇到的hover状态丢失问题。当用户在Windows浏览器中快速点击时，遮罩层会失去hover效果。为了解决这个问题，提出了在点击时添加isActive类并在mouseout时检查鼠标位置的解决方案，以确保在鼠标离开时仍能正确显示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时的效果图：
最低0.47元/天 解锁文章
扫一扫
795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
