关于样式选择器:hover出现忽闪现象

最新推荐文章于 2024-05-29 19:03:28 发布

会做饭的技术男

最新推荐文章于 2024-05-29 19:03:28 发布

阅读量609

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjak012jbiib&title=%E5%85%B3%E4%BA%8E%E6%A0%B7%E5%BC%8F%E9%80%89%E6%8B%A9%E5%99%A8%3Ahover%E5%87%BA%E7%8E%B0%E5%BF%BD%E9%97%AA%E7%8E%B0%E8%B1%A1

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

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

嗯，不错！

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于样式选择器:hover出现忽闪现象

有时候在做项目的时候会想给一个元素添加一个遮罩效果，然后鼠标划过去的时候，遮罩消失，一般最简单的方法就是使用样式选择器:hover，但是经历过才知道恶心，有种灯泡快要坏的感觉，闪瞎自己的眼睛，于是诞生了解决它的方法，代码如下（图片自己随便找几张，按照路径放进去就可以），开始....<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫