有时候在做项目的时候会想给一个元素添加一个遮罩效果，然后鼠标划过去的时候，遮罩消失，一般最简单的方法就是使用样式选择器:hover，但是经历过才知道恶心，有种灯泡快要坏的感觉，闪瞎自己的眼睛，于是诞生了解决它的方法，代码如下（图片自己随便找几张，按照路径放进去就可以），开始....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:hover忽闪解决方法</title>
<style>
.col-banner{
position: relative;
overflow: hidden;
transform:skewX(160deg);
width:16.6667%;
float:right;
transform-origin:0 0;
}
.col-banner img{
width: 100%;
}
.bannerDiv{
width:100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div class="col-banner">
<div class="bannerDiv"></div>
<img src="img/1.jpg">
</div>
<div class="col-banner">
<div class="bannerDiv"></div>
<img src="img/2.jpg">
</div>
<div class="col-banner">
<div class="bannerDiv"></div>
<img src="img/3.jpg">
</div>
<div class="col-banner">
<div class="bannerDiv"></div>
<img src="img/4.jpg">
</div>
<script>
var oCol = document.querySelectorAll(‘.col-banner‘);
var oBanner = document.querySelectorAll(‘.bannerDiv‘);
for(var i=0; i<oCol.length; i++){
oCol[i].index = i;
oCol[i].onmouseover = function(){
oBanner[this.index].style.display = ‘none‘;
};
oCol[i].onmouseout = function(){
oBanner[this.index].style.display = ‘block‘;
}
}
</script>
</body>
</html>
嗯，不错！