有时候在做项目的时候会想给一个元素添加一个遮罩效果，然后鼠标划过去的时候，遮罩消失，一般最简单的方法就是使用样式选择器: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出现忽闪现象的更多相关文章

  1. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  2. CSS样式选择器

    <!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...

  3. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  4. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  5. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  6. jquery选择器扩展之样式选择器

    https://github.com/wendux/style-selector-jQuery-plugin http://blog.csdn.net/duwen90/article/details/ ...

  7. 项模板选择器属性（ItemTemplateSelector属性）和样式选择器（ItemContainerStyleSelector）

    3.4.5 共享尺寸组 样式选择器: 或者========================================

  8. WPF数据模板样式选择器

    在使用数据模板样式选择器时,不能设置ItemContainerStyle的属性值,如果设置了该值,那么数据模板样式选择器会失去作用. 在使用数据模板样式选择器时,首先要创建数据模板样式选择器对象,此对 ...

  9. html添加css——样式选择器

    如何给html添加样式.两种方法: 一.新建立一个css样式表,与原html同目录,然后通过link标签链接.如:<link type="text/css" rel=&quo ...

随机推荐

  1. Objective-C AVPlayer播放视频的使用与封装

    大致效果 不要介意.界面有点丑... 界面搭建 看下成员变量就知道我怎么搭建的了,这里我将video播放层的size作为参照量,对所有控件的size按照其video的size宽高进行比例缩放 @int ...

  2. JS浏览器对象：window对象、History、Location对象、Screen对象

    一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...

  3. 为什么 1000 == 1000会返回false，100 == 100会返回true

    给你们看一段神奇的代码 /*对这段代码可以提供如下解释 * 判断两个对象是否相等的是看两个对象的引用是否相同 如果相同那么就返回true否则返回false * Integer会对-128~127之间的 ...

  4. Windows Server 2008 配置IIS+PHP

    问题: 最近要上线一个PHP写成的MVC项目,发现Windows Server 2008安装的还是PHP5.2,很多语法不支持. 尝试的一些解决方案: 1.将PHP升级为5.6,但是需要做好IIS和P ...

  5. [Android]Android焦点流程代码分析

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/7286503.html 通过View的View::focusSe ...

  6. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  7. SMBLoris windows拒绝服务漏洞

    在美国拉斯维加斯举行的2017年度DEF CON黑客大会上,安全研究人员公布了Windows系统上的一个长达20年没有发现的漏洞,该漏洞名为"SMBLoris",黑客可以轻松的使用 ...

  8. c++ STL 容器——联合容器

    STL提供了四种联合容器 set,multiset,map,multimap; set and multiset在<set>头文件 map and multimap在<map> ...

  9. TypeScript基础数据类型

    Typescript与Javascript 二者的区别 作为前端开发的基础语言javascript已经深入人心,人人皆知.作为变成入门的最简单语言,Javascript语言以动态.弱类型语言而著名,学 ...

  10. Web安全测试——威胁攻防

    SQL注入 部分程序员在编写代码的时候,没有对用户输入数据的合法性进行判断,使应用程序存在安全隐患.用户可以提交一段数据库查询代码,根据程序返回的结果,获得某些他想得知的数据,这就是所谓的SQL In ...