青海网站建设的企业,网站开发比较厉害,一个可以做网站,做自己的网站给人的启发业务介绍 默认#xff1a;第一个图标为选中状态#xff0c;其他三个图标事未选中状态
样式#xff1a;选中状态是深蓝#xff0c;未选中状体是浅蓝
交互#xff1a;鼠标放上去选中#xff0c;其他未选中#xff0c;鼠标离开时候保持当前选中状态
实现#xff1a;目前…
业务介绍 默认第一个图标为选中状态其他三个图标事未选中状态
样式选中状态是深蓝未选中状体是浅蓝
交互鼠标放上去选中其他未选中鼠标离开时候保持当前选中状态
实现目前只有一下四个图标需要用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) (divkey{index}onMouseOver{() { tabMouseOver(index);}}className{classnames(styles.tabItem)}div className{styles.iconBox}imgclassName{classnames({[styles.itemHover2]: activeIndex ! index index 0,[styles.itemHover1]: activeIndex index index ! 0,})}src{item.iconUrl}//div/div
))} 深度解读css中filter滤镜及在图片与边框改色方面的应用 - 技术日志 - 手册与笔记 - 易网
