有时候在做项目的时候会想给一个元素添加一个遮罩效果，然后鼠标划过去的时候，遮罩消失，一般最简单的方法就是使用样式选择器: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. Java之IO流概述和File基本操作

    IO流图解 IO(in / out)流的分类 流向: 输入流  读取数据 输出流  写出数据 数据类型: 字节流 一个字节占8位, 以一个字节为单位读数据 八大数据类型所占字节数: byte(1), ...

  2. Python网络数据采集6-隐含输入字段

    Python网络数据采集6-隐含输入字段 selenium的get_cookies可以轻松获取所有cookie. from pprint import pprint from selenium imp ...

  3. vue.js移动端app实战2：首页

    貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...

  4. Uva 122 树的层次遍历 Trees on the level lrj白书 p149

    是否可以把树上结点的编号,然后把二叉树存储在数组中呢?很遗憾如果结点在一条链上,那将是2^256个结点 所以需要采用动态结构 首先要读取结点,建立二叉树addnode()+read_input()承担 ...

  5. 抵制克苏恩[Lydsy2017年4月月赛]

    题目描述 小Q同学现在沉迷炉石传说不能自拔.他发现一张名为克苏恩的牌很不公平.如果你不玩炉石传说,不必担心,小Q同学会告诉你所有相关的细节.炉石传说是这样的一个游戏,每个玩家拥有一个 30 点血量的英 ...

  6. 又见angular----步一步做一个angular4小项目

    这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...

  7. B趣味求和

    编写一个程序,求Sn=a+aa+aaa+--+aa-aaa(有n个a)的值,其中a是一个数字. Input 输入数据含有不多于50组的数据,每组数据由两个正整数(0<a, n < 10)组 ...

  8. 学习jdbc学习笔记

    1.jdbc: java database connection      jdbc规范:是sun公司制定的一套连接操作数据库的接口.      我们必须要用具体的驱动类去连接操作数据库.    每个 ...

  9. <Mastering KVM Virtualization>：第三章 搭建独立的KVM虚拟化

    在第二章,你了解了KVM的内部结构:在本章中,您将了解如何将Linux服务器设置为虚拟化主机.我们正在讨论将KVM用于虚拟化并将libvirt作为虚拟化管理引擎. KVM开启了虚拟化并利用你的服务器或 ...

  10. DoNet 高效开发必备开发工具

    工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢? 本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环 ...