css hover改变svg颜色

转自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>

css

.step-init-position {background: url("../../assets/initPosition.svg") no-repeat center;
}
.of-h {overflow: hidden;
}
.btn {width: 17px;height: 17px;margin: 0 24px;filter: drop-shadow(#2F3335 100px 0);transform: translateX(-100px);
}
.cursor-pointer:hover {.btn {filter: drop-shadow(#3DB69C 100px 0);}
}

css hover改变svg颜色相关推荐

html怎么改变图片亮度,纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
css:hover改变另一个元素的样式
css:hover状态改变另一个元素样式的使用效果演示情景一:两个是兄弟元素情景二:两个是父子元素情景二:两个是兄弟元素,改变的是一个兄弟元素的子元素附加代码: <!DOCTYPE h ...
CSS hover 改变其他元素状态
在写网站的页面时,我发现很多网站都有展示企业的其他社交工作,例如下载APP的下载码,官方微信和微博等.这些图片的展示基本都是通过hover来实现的. 例如: hover改变其他元素状态,可以分为两种情 ...
CSS hover改变原生时出现抖动解决方法
有时我们会通过hover改变元素展示状态或高宽度但这样可能会引发页面抖动的奇葩事首先分析原因 : 其实这是谷歌浏览器的BUG 当你改变内容时浏览器以为元素超出了,立刻展示出滚动条过一会儿又发现 ...
css显示内容越来越模糊_纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色.或者是hover的时候,对图片的对比度, ...
html如何加深图片,css怎么改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面就来说说怎么用简单的css改变图片的颜色. 熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix- ...
CSS hover改变背景图片过渡动画生硬
解决方案:将hover要改变的背景放到另一层,hover时改变该层的透明度. 比如: 如果你想: div{transition:.5s;} div:hover{background:url(img); ...
图标.svg html怎么换颜色,如何改变SVG图像的颜色使用CSS(jQuery SVG图像替换)？
首先,在HTML中使用IMG标记嵌入SVG图形.我使用Adobe Illustrator来制作图形. 这就像你如何嵌入一个正常的图像.注意,您需要将IMG设置为具有svg的类. "社交链接& ...
html svg 颜色,通过css改变svg img的颜色
需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性:2.js在hover事件中切换图片:3.老一点的方案是hover切换背景 ...

css hover改变svg颜色

css hover改变svg颜色相关推荐

最新文章

热门文章