如何使用css的filter写鼠标滑过效果-创新互联

这篇文章主要为大家展示了如何使用css的filter写鼠标滑过效果，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“如何使用css的filter写鼠标滑过效果”这篇文章吧。

成都创新互联公司专业为企业提供杭州网站建设、杭州做网站、杭州网站设计、杭州网站制作等企业网站建设、网页设计与制作、杭州企业网站模板建站服务，10年杭州做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

使用css的filter写鼠标滑过效果

<div class="filter-div">
  <img class="filter-img" src="../assets/images/01list.png"/>
</div>
<style>
    .filter-div {
      width: 67px;
      height: 50px;
      background: #fff;
      &:hover {
          background: #5d7aae;
        }
    }
    .filter-img {
      width: 67px;
      height: 50px;
      &:hover {
         filter: brightness(100);
      }
    }
</style>

鼠标没有放上之前
无Hover

鼠标放上之后
有Hover

这里用到css filter:brightness(100)给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%或者0，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1，如果想染图片设置成白色，值为100。

因为传统的hover给img换src第一次hover的时候会让图片闪白，因为需要重新加载图片，这样做的好处就是图片只需要加载一次，当然这种做法也是有局限性的。

以上就是关于“如何使用css的filter写鼠标滑过效果”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注创新互联行业资讯频道。

网站题目：如何使用css的filter写鼠标滑过效果-创新互联
网址分享：https://www.cdcxhl.com/article16/dedggg.html

成都网站建设公司_创新互联，为您提供面包屑导航、网站设计、外贸建站、Google、网站设计公司、商城网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联