【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时动态切换的效果;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/305375.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

用python提取word中的所有图片

使用word中提取的方式图片会丢失清晰度&#xff0c;使用python写一个脚本&#xff0c;程序运行将弹出对话框选择一个word文件&#xff0c;然后在弹出一个对话框选择一个文件夹保存word中的文件。将该word中的所有图片都保存成png格式&#xff0c;并命名成image_i的样式。 程序…

go image.DecodeConfig 和image.Decode 不能同时使用吗

问题场景&#xff1a;在同时使用go image.DecodeConfig 和image.Decode获取图片信息时&#xff0c;报错提示&#xff1a; 无法读取图像配置 image: unknown format package mainimport ("fmt""github.com/golang/freetype""image""image/d…

软件压测工具有哪些功能和特点

目前市场上有许多成熟的压测工具&#xff0c;开发人员可以根据自己的项目特点和需求选择合适的工具进行压力测试。本文将介绍软件压测工具的功能和特点&#xff1a; 一、软件压测工具定义 软件压测工具是一种专门设计用于模拟大量用户并发访问系统的工具。通过模拟真实场景中的…

1876_电感的特性小结

Grey 全部学习内容汇总&#xff1a; GitHub - GreyZhang/g_hardware_basic: You should learn some hardware design knowledge in case hardware engineer would ask you to prove your software is right when their hardware design is wrong! 1876_电感的特性小结 主要是…

服务器运维工具推荐——站长、运维必看!

服务器运维是确保服务器系统稳定运行并保持高效性的重要工作。为了提高运维工作的效率&#xff0c;使用一些优秀的服务器运维工具是非常必要的。使用了解多款运维工具后&#xff0c;总结了几款还不错的工具&#xff1a; 1、Zabbix &#x1f4d2;简介&#xff1a;Zabbix是一款开…

分析一个项目(微信小程序篇)二

目录 首页&#xff1a; 发现&#xff1a; 购物车&#xff1a; 我的&#xff1a; 分析一个项目讲究的是如何进行对项目的解析分解&#xff0c;进一步了解项目的整体结构&#xff0c;熟悉项目的结构&#xff0c;能够知道每个组件所处在哪个位置&#xff0c;发挥什么作用。 接…

U盘、硬盘无法打开,修复RAW磁盘或分区,硬盘变成raw格式如何恢复,数据恢复

本文持续更新&#xff0c;针对遇到的数据丢失问题进行详细记录 磁盘变成RAW的可能原因 突然断电或关机文件系统丢失或损坏病毒或恶意软件感染坏扇区磁盘损坏 以下解决方案针对非病毒损坏 通过Windows自带的工具进行恢复&#xff08;CHKDSK命令&#xff09; 1.连接硬盘 2.…

自动化测试框架搭建(流程详解)

说起自动化测试&#xff0c;我想大家都会有个疑问&#xff0c;要不要做自动化测试&#xff1f; 自动化测试给我们带来的收益是否会超出在建设时所投入的成本&#xff0c;这个嘛别说是我&#xff0c;即便是高手也很难回答&#xff0c;自动化测试的初衷是美好的&#xff0c;而测试…

用PreMaint引领先进的预测性维护

在设备维护领域&#xff0c;预测性维护成为一项利用先进技术和巧妙工具的数据驱动战略。这一战略通过条件监控和数据分析&#xff0c;以主动维护的方式识别潜在的设备缺陷&#xff0c;避免问题升级。高效使用PreMaint预测性维护工具可不仅节省时间和成本&#xff0c;更显著提升…

信息时代的品牌危机与应对之道:迅腾文化的价值“从心所欲不逾矩”

在瞬息万变的信息时代&#xff0c;企业品牌面临着时代的危机与挑战。在这个时代&#xff0c;自诩能穿透未来迷雾的先知已然无法满足企业的需求&#xff0c;而居安思危、行死而生的“惶者”才是企业所需要的。迅腾文化正是这样的存在&#xff0c;积极倾听企业&#xff0c;融汇未…

Linux第22步_安装CH340驱动和串口终端软件MobaXterm

开发板输出信息通常是采用串口&#xff0c;而计算机通常是USB接口&#xff0c;为了让他们之间能够交换数据&#xff0c;我们通常采用USB转串口的转换器来实现。目前市场上的串口转换器大多是采用CH340芯片来实现的&#xff0c;因此我们需要在计算中安装一个CH340驱动程序&#…

LabVIEW在设备状态监测与故障诊断中的应用

在现代工业自动化领域&#xff0c;LabVIEW的系统设计平台在设备状态监测与故障诊断中扮演着举足轻重的角色。通过提供一个可视化和数据流编程语言&#xff0c;LabVIEW大大提升了设备安全监测的效率&#xff0c;减少了系统维护成本&#xff0c;同时增强了设备的可靠性和可维护性…

时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测

时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测 目录 时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 灰色HMMP-GM11改进模型,通过引入隐马尔可夫模型(HMM)来对原始数据进行状态分…

QT第二天

使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是否为&…

STM32---WWDG(窗口看门狗)超详细

写在前面&#xff1a;上节我们学习了独立看门狗&#xff08;IWDG&#xff09;相关知识&#xff0c;本节我们来学习另外一个看门狗——WWDG窗口看门狗&#xff0c;内容并不难&#xff0c;但是目前这些看门狗的具体内容&#xff0c;还没有得到一个很好的应用&#xff0c;还是先学…

基于apache的http文件服务配置

背景&#xff1a; 公司的产品使用的第三方模组可以OTA&#xff0c;厂家提供的是window开启软件&#xff0c;这样就可以在本机做http下载服务器&#xff0c;然后使用端口映射的方式&#xff0c;公开到外网&#xff0c;这样就可以进行4G网络访问内网服务器了。但这个有个弊端&am…

【前沿技术杂谈:ChatGPT】ChatGPT——热潮背后的反思

【前沿技术杂谈&#xff1a;ChatGPT】ChatGPT——热潮背后的反思 缘起&#xff1a;无中生有&#xff0c;涅槃重生人工智能技术人工智能的发展史无中生有内容自动生成技术的发展代表企业OpenAI-GPT系列技术的发展历程ChatGPT新特点 热潮&#xff1a;万众瞩目&#xff0c;群雄逐鹿…

YOLOv5改进 | 主干篇 | EfficientNetV2均衡缩放网络改进特征提取层

一、本文介绍 这次给大家带来的改进机制是EfficientNetV2,其在其V1版本通过均衡地缩放网络的深度、宽度和分辨率,以提高卷积神经网络的性能的基础上,又提出了一种改进的渐进式学习方法,通过在训练过程中逐步增加图像尺寸并适应性调整正则化来加快训练速度,同时保持准确性…

Apollo基础 - Frenet坐标系

Frenet与笛卡尔坐标系的转换详细推导见&#xff1a;b站老王 自动驾驶决策规划学习记录&#xff08;四&#xff09; Apollo相关代码&#xff1a; modules/common/math/cartesian_frenet_conversion.h #pragma once #include <array> #include "modules/common/mat…

2024年,前端必会的console骚操作

调试。程序员们努力地避免的东西,只为在代码中制造更多的错误。 编写无错误的代码是即使是最好的程序员也会觉得难以实现的。这就是为什么你应该总是调试代码。 而调试JavaScript代码的最好方法之一就是了不起的console.log()。除此之外,还有更好的方法。 这也正是本文的重点…