css3的filter图片滤镜使用

业务介绍

默认:第一个图标为选中状态,其他三个图标事未选中状态

样式:选中状态是深蓝,未选中状体是浅蓝

交互:鼠标放上去选中,其他未选中,鼠标离开时候保持当前选中状态

实现:目前只有一下四个图标,需要用css3的滤镜实现

代码实现

复制代码
//变深的滤镜
.itemHover1 {
  filter: hue-rotate(385deg) saturate(20);
}

//变浅的滤镜
.itemHover2 {
  filter: hue-rotate(6deg) saturate(1.5) opacity: 0.5;
}

const tabMouseOver = (index: any) => {
  setactiveIndex(index);
};

{tabItems.map((item, index) => (
  <div
    key={index}
    onMouseOver={() => {      
      tabMouseOver(index);
    }}

    className={classnames(styles.tabItem)}
    >
    <div className={styles.iconBox}>
      <img
        className={classnames({
          [styles.itemHover2]: activeIndex !== index && index == 0,
          [styles.itemHover1]: activeIndex === index && index !== 0,
        })}
        src={item.iconUrl}
        />
    </div>
  </div>
))}

深度解读css中filter滤镜及在图片与边框改色方面的应用 - 技术日志 - 手册与笔记 - 易网

相关推荐
某公司摸鱼前端23 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~24 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程30 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏31 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
黄雪超2 小时前
JVM——函数式语法糖:如何使用Function、Stream来编写函数式程序?
java·开发语言·jvm
ThetaarSofVenice2 小时前
对象的finalization机制Test
java·开发语言·jvm
思则变3 小时前
[Pytest] [Part 2]增加 log功能
开发语言·python·pytest