当前位置: 首页 > news >正文

【css】快速实现鼠标悬浮变色效果

在这里插入图片描述

<div class="nav-item"><div class="ic-img"></div><div>切换</div>
</div>.nav-item {width: 100rem;height: 45rem;line-height: 45rem;display: flex;text-align: center;justify-content: center;align-items: center;color: white;cursor: pointer;.ic-img {width: 20px;height: 20px;margin-right: 5px;background-size: 100% 100%;background-image: url('@/assets/ic.png');}&:hover {color: #1be7e0;.ic-img {background-image: url('@/assets/ic-actived.png');}}}

关键点:把图片作为背景设置,以此实现Hover时动态切换的效果;

http://www.lryc.cn/news/275941.html

相关文章:

  • 21. Mysql 事件或定时任务,解放双手,轻松实现自动化
  • Apache Doris 2.0.2 安装步骤 Centos8
  • Java学习苦旅(二十五)——哈希表
  • 性能分析与调优: Linux 实现 CPU剖析与火焰图
  • leetcode动态规划问题总结 Python
  • strtok函数的介绍
  • CF1909_C. Heavy Intervals题解
  • 【Python机器学习】理论知识:决策树
  • 天软特色因子看板 (2024.01 第2期)
  • java智慧医院互联网智慧3D导诊系统源码,经由智慧导诊系统多维度计算,准确推荐科室
  • WiFi7: MLD寻址
  • laravel-admin之 浏览器自动填充密码(如果需要渲染数据库密码的话,首先确认数据库密码是否可以逆向解密)
  • jquery图形验证码
  • dp专题10 目标和
  • 详解 docker 镜像制作的两种方式
  • selenium元素单击不稳定解决方法
  • vue3中vite使用sass
  • centos 8.0 安装sysbench 1.0.17
  • LabVIEW开发分布式光纤油气管道泄漏检测及预警系统
  • Go后端开发 -- Go Modules
  • 基于det_keypoint_unite的ROS功能包(jetson部署)
  • TS 36.211 V12.0.0-下行(8)-调制和上变频
  • 基于SSM酒店后台管理系统【源码】【最详细运行文档】
  • 利用Python实现每日新闻早报推送
  • 图像分割-Grabcut法
  • 性能测试浅谈
  • 媒体运营常用的ChatGPT通用提示词模板
  • Java学习苦旅(二十一)——泛型
  • 具备闭环思维的测试才更充分
  • flask web学习之模板(一)