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

news2024/11/13 8:07:57

在这里插入图片描述

<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.coloradmin.cn/o/1366403.html

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

相关文章

1.5PTA集练6-1~6-4,7-3,7-4(6/26)

6-1 顺序表的删除 分数 10 List Delete( List &L, ElementType minD, ElementType maxD ){int k0;for(int i0;i<L.last;i){if(L.Data[i]<maxD&&L.Data[i]>minD){L.Data[k]L.Data[i];}}L.lastk;return L; } 这个就是注意L需要是用.,而不是用->&#x…

lc 140. 单词拆分 II

回溯算法查询匹配单词 class Solution { public:unordered_map<string, int> word_map;void mapping(vector<string>& wordDict){for(auto &a : wordDict)word_map[a];}vector<string> ret;// s: 原始字符串// tmp: 已查询到的单词// …

免费的开源低代码平台推荐

1.JNPF 最后&#xff0c;推荐一个近期用的不错的低代码。 应用地址&#xff1a;https://www.jnpfsoft.com?csdn 开发语言&#xff1a;Java/.net 这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类&#xff0c;方便扩展&#xf…

如何使用静态IP代理解决Facebook多账号注册并进行网络推广业务?

在当今的数字时代&#xff0c;社交媒体成为了企业进行网络推广的一个重要途径&#xff0c;其中&#xff0c;Facebook是最受欢迎的社交媒体之一&#xff0c;因为它可以让企业通过创建广告和页面来推广他们的产品或服务。 但是&#xff0c;使用Facebook进行网络推广时&#xff0…

高级RAG(五):TruLens 评估-扩大和加速LLM应用程序评估

之前我们介绍了&#xff0c;RAGAs评估&#xff0c;今天我们再来介绍另外一款RAG的评估工具:TruLens , trulens是TruEra公司的一款开源软件工具&#xff0c;它可帮助您使用反馈功函数客观地评估基于 LLM 的应用程序的质量和有效性。反馈函数有助于以编程方式评估输入、输出和中间…

Google Earth Engine(GEE)深度学习入门教程- GEE导出篇

GEE导出篇 官方教程&#xff1a;TFRecord 和地球引擎 在GEE的JS Code Editor中&#xff0c;我们按照我们的需要去处理对应的遥感影像&#xff0c;得到处理后Image影像。为了导出后读取数据&#xff0c;在导出前一定清楚每个波段的名称&#xff08;不然没法读取&#xff09;。…

掌握Lazada API接口:开启电商开发新篇章,引领业务增长潮流

一、概述 Lazada API接口是Lazada平台提供的软件开发工具包&#xff0c;它允许第三方开发者通过编程方式访问Lazada平台上的商品、订单、用户等数据&#xff0c;并执行相关操作。通过使用Lazada API接口&#xff0c;开发者可以快速构建与Lazada平台集成的应用程序&#xff0c;…

三维轮廓测量仪:革命性技术在工业智能制造中的多重应用

现代工业智能制造领域中&#xff0c;三维轮廓测量仪是一项重要的测量技术。三维轮廓测量仪利用光学、激光或光电等技术手段&#xff0c;通过测量物体表面轮廓的三维坐标信息&#xff0c;能实现对物体形状、尺寸和表面特征的准确测量。它可以广泛应用于工业自动化、制造工艺控制…

CF1909_C. Heavy Intervals题解

CF1909_C. Heavy Intervals题解 题目传送门&#xff08;Problem - C - CodeforcesCodeforces. Programming competitions and contests, programming communityhttps://codeforces.com/contest/1909/problem/C&#xff09;。 题目翻译如下&#xff1a;&#xff08;图片来源&a…

不带控制器打包exe,转pdf文件时失败的原因

加了注释的两条代码后&#xff0c;控制器会显示一个docx转pdf的进度条。这个进度条需要控制器的实现&#xff0c;如果转exe不带控制器的话&#xff0c;当点击转换为pdf的按钮就会导致程序出错和闪退。 __init__.py文件的入口

前端学习笔记 3:Vue 工程

前端学习笔记 3&#xff1a;Vue 工程 上一篇文章介绍了如何在单一 Html 页面中使用 Vue&#xff0c;本文介绍如何从头开始用 Vue 构建一个前端工程项目。 1.环境准备 Vue 框架代码的创建依赖于 Node.js&#xff0c;因此需要先安装 Node.js。 2.创建和启动 2.1.创建 通过以…

【Docker】可以将TA用于什么,简单了解下

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是是《Docker容器》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深…

阿里云2024年优惠券活动大全

阿里云作为中国领先的云计算服务提供商&#xff0c;一直致力于为用户提供优质、高效、安全、可靠的云计算服务。为了更好地回馈用户&#xff0c;阿里云会不定期地推出各种优惠券活动&#xff0c;让用户在享受云计算服务的同时&#xff0c;也能享受到更多的实惠。 1、阿里云云小…

流量超了不容小觑,做到这些完全不用担心

流量告急的小伙伴们总是会有这种烦恼&#xff0c;一不注意就用超了&#xff0c;话费蹭蹭的没了&#xff0c;尤其是到月底的时候&#xff0c;一不留神&#xff0c;套餐说超就超。今天小编就给大家总结几个办法&#xff0c;很有效的让小伙伴们再也不用被“流量突然用完”的恐慌支…

大甩卖——代码全家桶!!!

Python-凯斯西储大学&#xff08;CWRU&#xff09;轴承数据解读与分类处理 Python轴承故障诊断 (一)短时傅里叶变换STFT Python轴承故障诊断 (二)连续小波变换CWT_pyts 小波变换 故障-CSDN博客 Python轴承故障诊断 (三)经验模态分解EMD_轴承诊断 pytorch-CSDN博客 Pytorch-…

Linux文件系统与日志分析

目录 一、Linux文件系统 1、inode与block 2、查看inode号码的命令 3、inode包含文件的元信息 4、Linux系统文件的三个主要时间属性 5、用户通过文件名打开文件时系统内部过程 6、inode的大小 7、inode的特点 二、日志 1、日志的功能 2、日志文件的分类 3、系统日志…

JavaScript基础(24)_dom查询练习(一)

<!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><link rel"stylesheet" href"../browser_default_style/reset.css"><title>dom查询练习一</title><style>.text {widt…

c语言:求1-100的奇数和|练习题

一、题目 求1-100以内的奇数和 二、代码截图【带注释】 三、源代码【带注释】 #include <stdio.h> //思路分析 //1、一个除以2&#xff0c;除不尽的&#xff0c;便是奇数 //设计常量N为100&#xff0c;常量随时可以变动 #define N 100 int main() { int sum0;//设…

【Python】不一样的Ansible(一)

不一样的Ansible——进阶学习 前言正文概念Ansible CorePlugins和Modules 插件插件类型编写自定义插件基本要求插件选项文档标准编写插件 添加一个本地插件注册为内置插件指定插件目录 其他一些技巧更改Strategy 结语 前言 Ansible 是一个极其简单的 IT 自动化引擎&#xff0c…

MISRA C 解读

说明&#xff1a;本文由vector官方视频整理而来&#xff0c;原视频链接解读MISRA C_哔哩哔哩_bilibili 1、MISRA 简介 1.1 发起 MISRA (The Motor Industry Software Reliability Association ) 汽车工业软件可靠性联会&#xff0c;起先作为研究车载嵌入式软件制备准则的开发…