CSS样式——悬停变色

news2024/11/23 15:01:01

目录

准备图标

实现效果

基础模板

清除默认样式

重合相同图标

实现悬停变色


CSS样式——悬停变色,效果如下所示:

准备图标

在完成上面的效果之前,我们需要准备图标,这里我使用的是阿里巴巴矢量图标库,不会使用阿里巴巴矢量图标库的可以参考如下步骤,会使用的可以跳过这一步。

首先在进入阿里巴巴矢量图标库,搜索你想要的图标,例如QQ、微信、微博,如下图所示:

 

找到你想添加的图标后,点击添加入库,如下图所示:

 点击添加入库后,点击右上角的购物车后,点击添加至项目,选择自己的项目即可,如下图所示:

 没有项目的可以点击上图右边红框添加项目。加入项目后,点击确定,在跳转的网页中,点击暂无代码,点此生成,即可,如下图所示:

 这样就成功生成了图标代码。

实现效果

接下来我们开始实现悬停变色效果。

基础模板

首先准备基础模板,示例代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式——悬停变色</title>
    <!-- 导入图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4070326_7rql82whlps.css">
</head>
<body>
<ul>
    <li>
        <span class="iconfont icon-qq"></span>
        <span class="iconfont icon-qq"></span>
    </li>
    <li>
        <span class="iconfont icon-weixin"></span>
        <span class="iconfont icon-weixin"></span>
    </li>
    <li>
        <span class="iconfont icon-weibo"></span>
        <span class="iconfont icon-weibo"></span>
    </li>
</ul>
</body>
</html>

首先导入准备好的图标库,通过为span标签设置图标样式从而显示图标,实现效果如下:

 

准备好模板,接下来开始编写CSS样式实现效果。

清除默认样式

首先需要清除ul的默认样式并设置li之间的距离,代码如下:

<style>
    ul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /*居中定位*/
        display: flex; /* 开启flex布局 */
        list-style: none; /* 去掉默认样式 */
    }

    ul li {
        margin: 0 10px;
        width: 40px;
        height: 40px;
    }
</style>

效果如下图所示:

重合相同图标

接下来重合相同图标并给每组的第一个图标添加边框,代码如下:

ul li span {
    position: absolute; /*两个相同的图标定位重合*/
    cursor: pointer; /* 鼠标经过时变小手 */
    font-size: 40px !important; /*强制更改图标大小*/
}

ul li span:first-child {
     height: 0; /*让上面的图标高度为0*/
     z-index: 2;
}
/* 给上面的图标设置不同颜色的下边框 */
ul li:nth-child(1) span:first-child {
     border-bottom: 1px solid #1da1f2;
}
ul li:nth-child(2) span:first-child {
     border-bottom: 1px solid #25d366;
}
ul li:nth-child(3) span:first-child {
     border-bottom: 1px solid #f00; 
}

实现效果如下:

实现悬停变色

接下来实现悬停变色,代码如下:

/* 实现动画 */
ul li span {
 transition: all 0.5s ease-in-out;
}

/*图标变色,并让上面的图标高度从0到100%*/
ul li:nth-child(1):hover span:first-child {
    color: #1da1f2;
    height: 100%;
}
ul li:nth-child(2):hover span:first-child {
    color: #25d366;
    height: 100%;
}
ul li:nth-child(3):hover span:first-child {
    color: #f00;
    height: 100%;
}

效果如下:

这样效果就完成了。

好了,CSS样式——悬停变色效果到这里就实现了。

公众号:白巧克力LIN

该公众号发布Python、数据库、Linux、Flask、自动化测试、Git、算法、前端等相关文章!

- END -

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

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

相关文章

聚力自主安全,领跑先进计算!麒麟信安闪耀2023首届国家新一代自主安全计算系统产业集群融通生态大会

5月25日至26日&#xff0c;2023首届“国家新一代自主安全计算系统产业集群”融通生态大会在长沙隆重举行。大会以“聚力自主安全 领跑先进计算”为主题&#xff0c;由工业和信息化部规划司指导&#xff0c;湖南省工业和信息化厅、长沙市人民政府主办&#xff0c;旨在围绕实现“…

C++入门——缺省参数|函数重载

前言&#xff1a; C入门我们主要是补充C语言的不足&#xff0c;为后续类和对象学习打基础。在前面我们学了命名空间、输入输出&#xff0c;今天我们继续学习。 上期链接&#xff1a; C入门——关键字|命名空间|输入&输出_wangjiushun的博客-CSDN博客 目录&#xff1a; …

CompletableFuture真香,可以替代CountDownLatch!

1、背景 之前我们提到了 Future 和 Promise。Future 相当于一个占位符&#xff0c;代表一个操作将来的结果。一般通过 get 可以直接阻塞得到结果&#xff0c;或者让它异步执行然后通过 callback 回调结果。 但如果回调中嵌入了回调呢&#xff1f;如果层次很深&#xff0c;就是…

Spring Cloud Alibaba 快速上手搭建公司项目(四)Sentinel

Sentinel是一个开源的云原生流量控制和熔断降级的组件&#xff0c;它可以实现对微服务架构中的服务进行实时监控、自动降级、熔断限流等功能。Sentinel的核心原理是通过滑动窗口的方式对请求进行控制&#xff0c;当请求超过阈值时&#xff0c;会自动触发熔断操作&#xff0c;避…

JavaWeb——JSP实现书城首页

实验名称&#xff1a; JSP实现书城首页 实验目的&#xff1a; &#xff08;1&#xff09;了解JSP的特点及其运行原理 &#xff08;2&#xff09;掌握JSP的基本语法 &#xff08;3&#xff09;熟悉JSP指令和隐式对象的使用 &#xff08;4&#xff09;掌握JSP动作元素的使用…

ABP VNext 利用QQ邮箱发送邮件

ABP VNext 利用QQ邮箱发送邮件 1.配置邮箱1.1 设置1.2账户1.3 开启邮箱服务1.4 生成授权码 2 默认的SmtpEmailSender发送邮件2.1 生成数据库2.2 添加一个后台任务执行发送邮件2.3 服务中注入ISmtpEmailSender2.4 在配置文件添加邮箱信息 3 集成MailKit发送邮件3.1 添加包Volo.A…

从Docker和Kubernetes看Containerd

导读&#xff1a; 在学习Containerd之前&#xff0c;我们需要去了解Docker与Kubernetes这两个使用Containerd最多的技术&#xff0c;也需要明白什么是容器&#xff0c;什么是容器运行时&#xff0c;以及里面涉及的组件&#xff0c;这些组件是用来干什么的&#xff0c;及容器领域…

Zabbix Httpd漏洞修复2

一、背景 漏洞库升级的真是快啊&#xff0c;绿盟扫描的zabbix服务器又有新的漏洞了&#xff0c;经一番折腾&#xff0c;搞定&#xff0c;记录如下。 二、漏洞内容 漏洞主要还是集中在php和http漏洞 三、修复过程 思路还是升级httpd版本解决。 1、查看下zabbix版本&#xff…

【JVM】垃圾回收机制

垃圾回收三大步骤&#xff1a;判断是不是垃圾(垃圾判断算法) -> 标记需要回收的垃圾(三色标记) -> 回收垃圾(垃圾回收算法)。 一、如何判断是不是垃圾&#xff08;垃圾判断算法&#xff09;&#xff1f; &#xff08;1&#xff09;引用计数器算法&#xff1a;对象中记录…

基于STM32F103C8T6的超声波测距——串口输出

文章目录 前言一、超声波模块介绍1、产品特点2、超声波模块的时序图 二、STM32CubeMx创建工程1、配置项目2、keil代码设置3、效果 三、总结四、参考资料 前言 环境&#xff1a; 1、硬件&#xff1a;stm32f103c8t6 核心板 2、软件&#xff1a;STM32CubeMX 6.4.0 3、软件&#xf…

进程通信管道制作

利用父子进程 创建管道利用pipe函数 // 1.创建管道int pipefd[2] {0}; //[0] 读端 &#xff0c;[1]写端int n pipe(pipefd);assert(n ! -1); // debug 在release下会裁减(void)n;//防止在release下报错cout << "fd[0]:" << pipefd[0] << endl…

多用户商城开源-多店铺商城系统平台开发

多用户商城开源是指一种基于开放源代码的电子商务平台&#xff0c;允许多个用户共享一个平台&#xff0c;每位用户可以创建自己的电子商城&#xff0c;并在平台上进行交易、管理、营销等操作。多用户商城开源通常包含多种功能&#xff0c;如商品管理、订单管理、支付集成、促销…

vue diff算法与虚拟dom知识整理(14) patchVNode处理子节点新增和删减

上文 vue diff算法与虚拟dom知识整理(13) 手写patch子节点更新换位策略 我们实现了子节点位置的更新策略 但还有一些匹配不到的情况会导致死循环 那么我们继续来优化一下 我们先将src下的 index.js 代码改成这样 import h from "./snabbdom/h"; import patch from …

Scrapy ImagesPipeline下载图片

一、 ImagesPipeline是啥 ImagesPipeline是scrapy自带的类&#xff0c;用来处理图片(爬取时将图片下载到本地)。 二、ImagesPipeline优势&#xff1a; 将下载图片转换成通用的jpg和rgb格式避免重复下载缩略图生成图片大小过滤异步下载 三、ImagesPipeline工作流程 爬取一个…

Echarts构建指定省份的地图

1. 自行准备好Echarts环境 Echarts官网&#xff1a;https://echarts.apache.org/zh/index.html 2. 下载需要的省份或者城市的json地理信息文件 下载我们需要显示地区的Json数据&#xff0c;这个Json数据用于Echart的地图显示 例如我这里是下载的&#xff1a;湖南、湖北、四川…

同步模式之顺序控制线程执行

tip: 作为程序员一定学习编程之道&#xff0c;一定要对代码的编写有追求&#xff0c;不能实现就完事了。我们应该让自己写的代码更加优雅&#xff0c;即使这会费时费力。 文章目录 一、同步模式之顺序控制线程执行二、代码样例三、三个线程分别输出a、b、c&#xff0c;按顺序输…

作为一个项目管理成员,怎样才能有效监控项目执行?

作为一个项目管理成员&#xff0c;有效监控项目执行是确保项目成功的关键。在项目执行期间&#xff0c;您需要密切关注项目进展&#xff0c;并及时采取行动来纠正任何偏差。以下是几个有效的方法&#xff0c;可以帮助您监控项目执行并确保项目按计划顺利进行。 1. 制定详细的项…

C语言进阶--数据的存储

目录 数据类型介绍 基本内置类型&#xff1a; 类型的意义&#xff1a; 类型的基本归纳&#xff1a; 整型在内存中的存储 原码&#xff0c;反码和补码&#xff1a; 大小端存储模式&#xff1a; 大小端产生原因&#xff1a; 浮点型在内存中的存储 数据类型介绍 基本内…

六、机械手的种类

机械手是机器人能够完成指令的一个重要输出装置&#xff0c;机器臂是否合理、有效&#xff0c;决定了机 器人能否发挥出应有的作用。 机械手是一种能模仿人手和臂的某些动作功能&#xff0c;用以按固定程序抓取、搬运物件或操作工具的自动操作装置。特点是可以通过编程来完成各…

wy的leetcode刷题记录_Day68

wy的leetcode刷题记录_Day68 声明 本文章的所有题目信息都来源于leetcode 如有侵权请联系我删掉! 时间&#xff1a;2023-6-6 前言 目录 wy的leetcode刷题记录_Day68声明前言1019. 链表中的下一个更大节点题目介绍思路代码收获 1019. 链表中的下一个更大节点 2352. 相等行列…