使用css的filter写鼠标滑过效果的实现示例

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

<div class="filter-div">
  < img  class="filter -i mg" src=" .. /assets/images/01list.png"/>
</div>
<style>
    .filter-div {
      width: 67px;
      h ei ght: 50px;
      background:  # fff;
      & am  p; :hover {
          background: #5d7aae;
        }
    }
    .filter-img {
      width: 67px;
      height: 50px;
      &:hover {
         filter:  br ightness(100);
      }
    }
</style>

鼠标没有放上之前
无Hover

鼠标放上之后
有Hover

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

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

到此这篇关于使用css的filter写鼠标滑过效果的实现示例的 文章 就介绍到这了,更多相关css的filter鼠标滑过内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 使用css的filter写鼠标滑过效果的实现示例 全部内容，希望文章能够帮你解决 使用css的filter写鼠标滑过效果的实现示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于使用css的filter写鼠标滑过效果的实现示例的详细内容...