黑松山资源网 Design By www.paidiu.com
使用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的时候会让图片闪白,因为需要重新加载图片,这样做的好处就是图片只需要加载一次,当然这种做法也是有局限性的,欢迎指正
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- EA称AI是其业务核心!能提高开发效率、节约成本
- 卫华.1990-太阳升【BMG】【WAV+CUE】
- 呼吸乐队.1992-THEBREATHING【深飞】【WAV+CUE】
- 李玟.2008-1994-2008豪华典藏精选2CD【SONY】【WAV+CUE】
- 《张学友 再现歌神的光辉岁月 梦想成真 2CD》[WAV/分轨][1.2GB]
- 《海来阿木 高音测试王》[WAV+CUE][500MB]
- 《许巍 歌声给你生命的力量 珍藏许巍 3CD》[WAV/分轨][2GB]
- 《直到黎明重制版》配置要求推荐
- 《赛博朋克2077》2.13版本更新内容一览
- 《神话时代:重述版》评测:粉丝们的朝花夕拾
- 战锤40K星际战士2先锋职业介绍|先锋职业技能效果一览
- 战锤40K星际战士2重装职业介绍|重装职业技能效果一览
- 交错战线能源发电站推荐角色一览
- 阿波罗乐神之音《第4集出埃及记》[WAV+CUE]
- JohnWrightTrio-SouthSideSoul-1960-2024(24-192)