使用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鼠标滑过内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
虽然后来微软对浏览器进行了大量的研发,但事实是现代IE浏览器在大多数时候比基于...
熟练地管理网站文件,能让我们的网站井然有序,修改升级等会十分方便。 软件名称...
本文主要介绍了AmazeUI导航的示例代码,分享给大家,也给自己留个笔记,具体如下...
一、 前言 随着网购的持续发展,抢购类倒计时在各类电商应用中已十分常见,这种...
css样式 html,body{width: 100%;height: 100%;margin: 0;padding: 0;}/*导航图标...
Dreamweaver中的css选择器是定义css规则首选需要选择的,css选择器主要有:类\id...
摩尔定律不再适用 从2004年伟创力(Flextronics)收购 Frog 设计公司开始,过去 10...
绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满...
作者:Shadeed 译者:前端小智 来源:dmitripavlutin 有梦想,有干货,微信搜索 ...
作者:Ahmad shaded 译者:前端小智 来源:sitepoint 点赞再看,养成习惯 本文 G...