zoukankan      html  css  js  c++  java
  • 关于样式选择器: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);
                16.6667%;
                float:right;
                transform-origin:0 0;
            }
            .col-banner img{
                 100%;
            }
            .bannerDiv{
                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>

    嗯,不错!

  • 相关阅读:
    jquery web 國際化
    Struts2 分割字符串标签s:generator
    (55) 销售锁货功能
    (54) 记录销售单修改详细
    (53) 动态列表自定义
    exe文件作为服务启动
    (52)KeyError错误
    (51) magento集成增加到款通知
    (50)与magento集成
    (49) odoo context操作
  • 原文地址:https://www.cnblogs.com/shenwh/p/7485951.html
Copyright © 2011-2022 走看看