有时候在做项目的时候会想给一个元素添加一个遮罩效果，然后鼠标划过去的时候，遮罩消失，一般最简单的方法就是使用样式选择器: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. Django中ORM模型总结(一)[概述，查询语句]

    理解ORM框架 概述 O:(objects)->类和对象. R:(Relation)->关系,关系数据库中的表格. M:(Mapping)->映射. 作用: 可以通过类和类对象就可以 ...

  2. HDU1027 Ignatius and the Princess II

    Problem Description Now our hero finds the door to the BEelzebub feng5166. He opens the door and fin ...

  3. Docker网络——单host网络

    前言 前面总结了Docker基础以及Docker存储相关知识,今天来总结一下Docker单主机网络的相关知识.毋庸置疑,网络绝对是任何系统的核心,他在Docker中也占有重要的作用.同样本文基于Clo ...

  4. 关于javascript在OJ系统上编程的注意事项

    ① 牛客网输入流: var line=readline().split(' '); ② 赛码网输入流: var line=read_line().split(' '); ③ 输出流: print(); ...

  5. Nagios部署与配置

    Nagos是一款开源电脑系统和网络监视工具,能够有效监控windows,linux,Uninx的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知运维人员 ...

  6. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  7. 一次和matplotlib和numpy的初识及简单的异常值清理

    1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 ...

  8. java实现网页爬虫

    接着上面一篇对爬虫需要的java知识,这一篇目的就是在于网页爬虫的实现,对数据的获取,以便分析. -----> 目录:   1.爬虫原理 2.本地文件数据提取及分析 3.单网页数据的读取 4.运 ...

  9. 【NO.4】jmeter-cookie管理器

    Compatibility 这种兼容性设计要求是适应尽可能多的不同的服务器,尽管不是完全按照标准来实现的.如果你遇到了解析Cookies的问题,你就可能要用到这一个规范. 有太多的web站点是用CGI ...

  10. CBO 基于成本的优化器[基础]

    转载:CBO基于成本的优化器 ----------------------------------2013/10/02 CBO基于成本的优化器:让oracle获取所有执行计划的相关信息,通过对这些信息 ...