關於樣式選擇器:hover出現忽閃現象
有時候在做項目的時候會想給一個元素添加一個遮罩效果，然後鼠標劃過去的時候，遮罩消失，一般最簡單的方法就是使用樣式選擇器: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>
嗯，不錯！
關於樣式選擇器:hover出現忽閃現象