改变小图标的颜色，hover时颜色变深

最新推荐文章于 2024-06-13 11:45:31 发布
最新推荐文章于 2024-06-13 11:45:31 发布
阅读量9.1k 收藏 3
点赞数 3
分类专栏： css 文章标签： filterdrop-shadow 改变小图标颜色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AHRL__/article/details/78305812
版权

要使元素产生投影，主要有两个方法，我们使用最多的就是box-shadow，第二个就是filter：drop-shadow()。

用法：

filter：drop-shadow（x偏移，y偏移，模糊大小，色值）。


跟box-shadow有些相似，然而我们经常遇到小图标在鼠标盘旋时，颜色变深的情况，这个可以通过drop-shadow实现。

将前面三个参数都设置为0，就可以改变小图标的颜色。

对比鼠标移入后的区别：

         


AHRL__
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
CSS改变图标颜色（filter一行代码解决hover变换颜色问题）
lplovewjm的博客
07-12 948
图标hover前后颜色变换，用filter一行代码解决。
Echarts 地图设置鼠标hover区块颜色,地图描点,描点选中
weixin_43060106的博客
06-21 3131
【代码】Echarts 地图设置鼠标hover区块颜色,地图描点,描点选中。
修改svg-icon的颜色：移入变色
最新发布
qq_38210427的博客
06-13 183
首先要把中fill="currentColor"，不改没有效果。
echart 柱状图 带箭头 调整柱子宽度 设置柱子颜色 hover时改变柱子颜色
weixin_30776545的博客
09-05 299
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echart 柱状图 带箭头 调整柱子宽度 设置柱子颜色 hover时改变柱子颜色</title>...
icon图标-Svg格式的icon颜色值修改及去掉hover时自带的提示 title
細水、長流√的专栏
11-04 1474
部分文件（例如delete-grey）: 把filter="url(#filter-1)"等删掉，（总之可以参考着export.svg修改）进入图标的svg文件：把fill=“#000”改成：fill=”currentColor”1. 去svg文件注释掉title。
css实现图片hover的时候改变颜色
qq_44552416的博客
07-14 1845
做项目开发过程的时候，会遇到不少图标/图片在hover的时候展示出活跃色表示能够点击。 切换图源是个方案，实现起来要JS，还增加图片资源，没必要。可以用CSS来实现。使用活跃色的图片素材，给它一个灰色的滤镜。hover的时候取消这个滤镜，还原活跃色。 效果：...
移动鼠标（动态）改变svg图标的颜色
唯心所现，唯识所变
03-29 5120
动态改变svg图标的颜色 一共三个步骤： 删除svg中的颜色属性； 在页面引入时给予一个初始颜色； 在css中设置变动后的颜色； 一、在阿里巴巴矢量图中下载svg格式的图片，然后直接拖动到自己的项目中，保存，然后查看svg代码,然后把设置颜色的 fill元素 删除。 goBack-icon.svg <svg t="1616980614484" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www
纯CSS3实现的动态天气小图标特效源码.zip
11-20
此资源“纯CSS3实现的动态天气小图标特效源码.zip”提供了一种利用CSS3技术制作动态天气小图标的解决方案。这种技术无需依赖JavaScript或者其他图像处理库，完全通过CSS3的特性实现，对于网页性能优化和减少网络请求...
16种基于Bootstrap的css3图片hover效果
07-07
Bootstrap是一种流行的前端开发框架，由Twitter开发，它提供了一套完整的工具，包括预定义的CSS样式、JavaScript组件和字体图标，使得网页设计和开发变得更加高效和便捷。在本主题中，我们将深入探讨“16种基于...
10种炫酷鼠标hover按钮CSS3动画特效
12-13
10. 动态图标：按钮图标在hover时有动态效果，如旋转、平移等。 每个特效都有其独特的应用场景，可以根据网页的整体风格和功能需求选择合适的按钮动画。这些特效不仅适用于网站按钮，还可以应用于其他需要交互效果...
css3模拟按钮图标icon
10-31
例如，`:hover`可以在鼠标悬停时改变按钮的颜色或背景，`:active`则用于表示用户正在与按钮交互，`:focus`则在按钮获得键盘焦点时应用样式。 2. **渐变和阴影**：CSS3支持线性渐变和径向渐变，可以用于创建平滑的...
一组漂亮的css3按钮（各种颜色+样式）
12-13
5. **伪类选择器**：CSS3中的`:hover`, `:active`, 和 `:focus`伪类选择器允许我们在用户与按钮交互时改变其样式。例如，当鼠标悬停在按钮上时，我们可以更改背景色或文字颜色，以提供反馈。 6. **过渡和动画**：`...
css hover改变svg颜色
OldStreet61的博客
08-26 2585
转自https://blog.csdn.net/qq_39785489/article/details/107781746 想要实现菜单前的icon（svg格式），根据hover改变svg颜色，并且默认选中项也是高亮。最终实现思路，参考如上连接的方法。 <div class="of-h cursor-pointer"> <div class="btn step-init-position"></div> </div> cs
CSS之鼠标悬停——内容变深/变浅
weixin_33819479的博客
05-30 1510
分别制作两套样式，鼠标悬停（hover）和默认状态时 变深设置： .img{ filter: alpha(Opacity=60); opacity: 0.6; } .img:hover{ filter: alpha(Opacity=100); opacity: 1; } 变浅设置： .img{ filter: alpha(Opacity=100); opac...
按钮点击后的颜色css,CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu...
weixin_35856883的博客
08-04 2646
具体代码如下button{position: relative;}button:active::before {display: block;content: '';position: absolute;top: 0px;left: 0px;width: %;height: %;background: rgba(, , , %)}如果是自定义DIV也是可以用同样方法的，可以改为.btn{posit...
纯css修改图标颜色的五种方式
weixin_42202310的博客
02-24 4015
本文总结了纯css改变图标颜色的五种办法，适用于同一图标用于多种颜色，从而减少打包体积，总结不易，多多点赞收藏。
CSS 控制图标颜色
xqhys的博客
08-08 6255
背景 实际项目中，一般都会遇到不同颜色的图标，例如 导航栏图标的不同状态 方法 方法1 需要UI设计师给出不同颜色的图标，在不同状态下设置不同的元素背景。 .icon { background-image: url(./home.png); } .icon.active { background-image: url(./home-active.png); }...
如何在某个元素hover的时候，行和列都加上背景颜色，并且本身就有颜色需要重叠加深（antd of vue 中的 table）
CSND7997的博客
10-12 1144
需求主要是方便用户可以看出自己鼠标悬停的时候，对准的行和列 这里明显可以看出，鼠标悬停在箭头方向的时候，横着的背景颜色加深（这里是antd中table表格中自己 ‘行’ 中的hover）代码如下.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { background: #e6f7ff; }，但是因为也想让 ‘列’ 中也添加hover背景颜色 在vue中，通过.
CSS实现按钮点击后根据背景色加深效果
bigniu的博客
02-19 3917
具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0,...
阿里iconfont怎么改变图标大小颜色
07-15
要在阿里Iconfont中更改图标的大小和颜色，您可以使用CSS样式来修改它们的外观。以下是一些常见的方法： 1. 大小调整：您可以使用`font-size`属性来调整图标的大小。将其应用于包含图标的元素即可。例如： ```css .icon { font-size: 24px; } ``` 上述代码将`.icon`类中的图标大小设置为24像素。 2. 颜色修改：您可以使用`color`属性来修改图标的颜色。将其应用于包含图标的元素即可。例如： ```css .icon { color: red; } ``` 上述代码将`.icon`类中的图标颜色设置为红色。 3. 使用样式类：在阿里Iconfont中，每个图标都有一个唯一的类名。您可以直接使用该类名来修改图标的样式。例如： ```html <i class="iconfont icon-heart"></i> ``` ```css .icon-heart { font-size: 24px; color: red; } ``` 上述代码将具有类名为`icon-heart`的图标的大小设置为24像素，并将其颜色设置为红色。 请注意，这些示例仅演示了如何使用CSS来更改阿里Iconfont中图标的大小和颜色。确保在应用样式之前，先引入正确的Iconfont字体文件，并验证所用的类名和选择器是否正确。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值