关于样式选择器: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出现忽闪现象的更多相关文章
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS样式选择器
<!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...
- 前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- jquery选择器扩展之样式选择器
https://github.com/wendux/style-selector-jQuery-plugin http://blog.csdn.net/duwen90/article/details/ ...
- 项模板选择器属性（ItemTemplateSelector属性）和样式选择器（ItemContainerStyleSelector）
3.4.5 共享尺寸组 样式选择器: 或者========================================
- WPF数据模板样式选择器
在使用数据模板样式选择器时,不能设置ItemContainerStyle的属性值,如果设置了该值,那么数据模板样式选择器会失去作用. 在使用数据模板样式选择器时,首先要创建数据模板样式选择器对象,此对 ...
- html添加css——样式选择器
如何给html添加样式.两种方法: 一.新建立一个css样式表,与原html同目录,然后通过link标签链接.如:<link type="text/css" rel=&quo ...
随机推荐
- （转）每天一个linux命令（15）：tail 命令
场景:每次查看服务端的日志时候都需要反复重新加载服务端的日志.用tail命令可以很方便的查看服务器上的日志更新! tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅 ...
- angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.searchFiles = { n ...
- RobotFramework自动化测试框架的基础关键字（四）
1.1.1 如何使用for循环 不管在哪种编程语言中,for循环都是必不可少的,在Robot Framework中,我们也可以使用for循环来做遍历处理. 我们用for循环对一个列表进行 ...
- Linux(1)目录
Linux目录 / :根目录, 一般只存放目录, 在Linux下只有一个根目录. 所有的东西都是从这里开始 /bin, /usr/bin :可执行的二进制文件目录, 如常用的ls, tar, mv, ...
- python8 字符串操作
name = "my name is {name} and i am {year} old" print(name.capitalize()) print(name.count(& ...
- HTML5 新点总结-持续
H5新的表单元素:datalist datalist的表现形式和原先的select标签相似,但是datalist想要发挥作用需要input标签的帮助:这样就可以在input标签中显示类似select下 ...
- 6个Linux chkconfig命令实例 - 增加，删除，查看和修改services的自动启动选项
注意:service的安装目录在/etc/rc.d/init.d下,/etc/init.d 是/etc/rc.d/init.d的链接. chkconfig命令用来安装,查看或修改 services随系 ...
- 多表连接的三种方式 HASH MERGE NESTED
多表连接的三种方式详解 HASH JOIN MERGE JOIN NESTED LOOP------------------------------------------------------20 ...
- U3D 控件
1.普通控件 GUI.Label() GUI.Button()等方法添加控件 bool clicked = GUI.Button() 当按钮单击时,返回true string ss = GUI.Tex ...
- php 单引号，双引号，反引号区别
PHP中单引号,双引号,反引号具有不同的含义,最大的几项区别如下: 一.单引号中,任何变量($var).特殊转义字符(如"\t \r \n"等)不会被解析,因此PHP的解析速度更快 ...