【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.mzph.cn/news/606225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java每日一题——输出9x9乘法表(答案及编程思路)

前言&#xff1a; 打好基础&#xff0c;daydayup! 题目&#xff1a;输出下图9x9乘法表 编程思路&#xff1a;java只能输出行&#xff0c;不能输出列&#xff0c;所以考虑好每一行输出的内容即可 public class demo {public static void main(String[] args) {for (int i 1; i…

文档审阅批注的合并和对比

#创作灵感# 最近在改论文&#xff0c;Feedback返回的时候&#xff0c;把之前的批注都删了&#xff0c;这就增加了工作量&#xff0c;看起来不方便&#xff0c;所以就需要将删掉的批注全部复原。 那在原来的文档重新在修改一遍&#xff0c;工作量还是很大的&#xff0c;所以这里…

数字新生态:低代码开发的实践应用

低代码开发是一种快速构建软件应用程序的方法&#xff0c;极大地简化了传统编码的流程。本文将探讨数字新生态中低代码开发的实践应用&#xff0c;以及它如何推动业务创新和提高开发效率。 引言 随着信息技术的飞速发展&#xff0c;数字化转型已成为企业和组织的当务之急。但是…

两种方式实现mysql截取年月日

select date_format(now(), %Y-%m-%d) select substring(now(), 1, 10)

三剑客前端教程

前端教程 结构层&#xff08;html&#xff09;表现层&#xff08;css&#xff09;行为层&#xff08;javascript&#xff09; HTML 超文本标记语言&#xff09; HTML&#xff08;超文本标记语言——HyperText Markup Language&#xff09;是构成 Web 世界的一砖一瓦。它定义…

探索PyTorch优化和剪枝技术相关的api函数

torch.nn子模块Utilities解析 clip_grad_norm_ torch.nn.utils.clip_grad_norm_ 是 PyTorch 深度学习框架中的一个函数&#xff0c;它主要用于控制神经网络训练过程中的梯度爆炸问题。这个函数通过裁剪梯度的范数来防止梯度过大&#xff0c;有助于稳定训练过程。 用途 防止…

Dockerfile基本结构及编写详解

文章目录 1 Dockerfile1.1 Dockerfile的基本结构1.2 Dockerfile文件说明1.3 Dockerfile常见命令1.4 build命令1.5 部署微服务1.6 docker-compose部署 1 Dockerfile ​ Dockerfile其实就是我们用来构建Docker镜像的源码&#xff0c;当然这不是所谓的编程源码&#xff0c;而是一…

汽车雷达:实时SAR成像的实现

摘要: 众所周知,点云成像是目前实现汽车雷达感知最流行的方案,尤其是采用多级联实现的4D点云成像雷达,这是目前最有希望实现产品落地的技术方案之一。 今天重点分享关于汽车雷达SAR成像相关技术内容,这也证实了4D点云成像雷达并不一定就是汽车雷达成像唯一的方案,在业内…

CompletableFuture超详解与实践

0.背景 一个接口可能需要调用 N 个其他服务的接口&#xff0c;这在项目开发中还是挺常见的。举个例子&#xff1a;用户请求获取订单信息&#xff0c;可能需要调用用户信息、商品详情、物流信息、商品推荐等接口&#xff0c;最后再汇总数据统一返回。 如果是串行&#xff08;按…

前端如何结合数据库查看本地头像文件,配置静态资源

由于oss过期了&#xff0c;项目中又需要一个上传头像功能&#xff0c;于是研究了一下上传文件至本地&#xff0c;用java将文件存储到本地的代码好写&#xff0c;但是如何利用前端Vue把我难住了&#xff0c;因为之前存在OSS服务器直接查看就可以了&#xff0c;于是记录本文。 后…

数据结构-测试4

一、判断题 1.队列结构的顺序存储会产生假溢出现象。 &#xff08;T&#xff09; 2.度为二的树就是二叉树。(F) 二叉树的度可以小于等于2 3. 栈是插入和删除只能在一端进行的线性表&#xff1b;队列是插入在一端进行&#xff0c;删除在另一端进行的线性表。&#xff08;T&…

C++模板——(2)函数模板的声明和使用

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 勤奋&#xff0c;机会&#xff0c;&am…

Linux文件系统与日志管理

目录 一、Linux文件系统 1、inode 与 block 详解 1.1 inode 和 block 概述 1.2 inode表的内容 1.3 查看文件的inode号码 1.4 模拟innode号耗尽故障处理 2、访问文件的流程 3、文件恢复 3.1 恢复误删除的ext3格式文件 3.2 恢复误删除的 xfs 格式文件 二、Linux日志…

《BackTrader量化交易图解》第8章:plot 绘制金融图

文章目录 8. plot 绘制金融图8.1 金融分析曲线8.2 多曲线金融指标8.3 Observers 观测子模块8.4 plot 绘图函数的常用参数8.5 买卖点符号和色彩风格 8. plot 绘制金融图 8.1 金融分析曲线 BackTrader内置的plot绘图函数&#xff0c; 通过style参数变量控制不同风格的K线图&…

因为热Key和大Key,Redis终于被压崩了

大家好&#xff0c;我是洋子&#xff0c;今天分享一下在做压测时遇到的很有意思的性能问题以及对应的排查解决方案。这个性能问题的现象为&#xff0c;Redis线上实例不可用&#xff0c;Redis读写均超时 性能问题排查过程 先来看一下问题代码&#xff08;Go语言实现&#xff0…

【CMake】1. VSCode 开发环境安装与运行

CMake 示例工程代码 https://github.com/LABELNET/cmake-simple 插件 使用 VSCode 开发C项目&#xff0c;安装 CMake 插件 CMakeCMake ToolsCMake Language Support &#xff08;建议&#xff0c;语法提示) 1. 配置 CMake Language Support , Windows 配置 donet 环境 这…

RT-Thread: 基于STM32CubeMX配置驱STM32驱动的USB虚拟串口调试

关键词&#xff1a;USB 虚拟串口 USB虚拟串口&#xff0c;RT-Thread Studio&#xff0c;STM32 说明&#xff1a; 1&#xff1a;文档记录 STM32F103系列基于 RT-Thread 系统的 USB虚拟串口的开启及数据收发应用流程介绍。 2&#xff1a;本文以STM32F103C8T6型号做测试&#x…

计算机基础面试题 |16.精选计算机基础面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Win10电脑关闭OneDrive自动同步的方法

在Win10电脑操作过程中&#xff0c;用户想要关闭OneDrive的自动同步功能&#xff0c;但不知道具体要怎么操作&#xff1f;首先用户需要打开OneDrive&#xff0c;然后点击关闭默认情况下将文档保存到OneDrive选项保存&#xff0c;最后关闭在这台电脑上同步设置保存就好了。接下来…

TypeScript 从入门到进阶之基础篇(九) Class类篇

系列文章目录 TypeScript 从入门到进阶系列 TypeScript 从入门到进阶之基础篇(一) ts基础类型篇TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇TypeScript 从入门到进阶之基础篇(三) 元组类型篇TypeScript 从入门到进阶之基础篇(四) symbol类型篇TypeScript 从入门到进阶…