关于样式选择器: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>
嗯,不错!
最新文章
- Fis3的前端模块化之路[基础篇]
- 【基于WinForm+Access局域网共享数据库的项目总结】之篇二:WinForm开发扇形图统计和Excel数据导出
- react 表单
- eclipse整体设置
- T-SQL、JET SQL、PL-SQL
- Ionic2学习笔记(4):*号
- Java经典实例:使用DateFormatter来格式化日期时间
- 关于ubuntu下词典安装
- InnoSetup能够实现“安装细节描述”界面吗?
- zhx and contest (枚举 + dfs)
- vb6中webbrowser控件树转换备忘
- PHP创建XML文件讲解
- juggle
- JavaScript之图片滚动
- Redundant Call to Object.ToString()
- linux命令之pwd(print working drectory)
- BZOJ 4085:[Sdoi2015]bigyration(SDOI 2015 round 2 Day 1)
- windows下使用docker安装tensorflow
- Servlet生命周期 、Filter生命周期、Listering(监听器)总结
- 变量类型、构造器、封装以及 LeetCode 每日一题