需求如下图，hover的时候改变图标颜色，图标为引入的svg img

一般的解决办法有：1.字体图标改变css的color属性；2.js在hover事件中切换图片；3.老一点的方案是hover切换背景？

但是为了更小的开销，一般css为更好的解决方案，svg的颜色是在标签内通过fill属性写死的，所以用到了使用了CSS3滤镜filter中的drop-shadow。

代码如下：

{item.line1}

{item.line2}

section{

.image{

display: inline-block;

overflow: hidden;

}

img{

position: relative;

left:;

margin-bottom: .1rem;

filter: drop-shadow(#ffffff 80px 0);

border-left: 30px solid transparent;

border-right: 30px solid transparent;

} &:hover{ background-color: gray; img{ left: -80px; } } }

drop-shadow(h-shadow v-shadow blur spread color)：给图像设置一个阴影效果。其中 分别设置阴影的偏移量，且必填。具体可以查看w3c的标准

主要的实现原理就是设置需要的阴影效果，并隐藏，hover时切换显示就好。

但是发现，在safari浏览器中，图片主体隐藏后，阴影也消失了，查看filter的兼容发现safari其实是支持这个属性的，所以给原图片加上了透明边框

border-left: 30px solid transparent;//防止drop-shadow主体超出视线隐藏后阴影消失

border-right: 30px solid transparent;

css改变svg的颜色

css 修改svg图标的颜色(不修改fill)

给icon加样式 (利用原图标的阴影区域,同时将原图标移动超过之前父元素范围)filter: drop-shadow(red 80px 0);transform: translateX(-80px); ...

使用 CSS MARK 改变 SVG 背景色

CSS masks -webkit-mask 这个属性是相当强大的,详细的介绍请到这里查看,它非常值得深入研究. -webkit-mask 让为一个元素添加蒙板成为可能,从而你可以创建任意形状的花样. ...

css改变hr颜色

html中用css改变颜色,

---

如果不加border:0;的话,虽然颜色改变了,但是会显示一条黑色的边框. ...

CSS改变插入光标颜色caret-color简介及其它变色方法(转)

一.CSS改变输入框光标颜色的原生属性caret-color CSS caret-color属性可以改变输入框插入光标的颜色,同时又不改变输入框里面的内容的颜色. 例如: input { color: ...

[转]用CSS给SVG <use>的内容添加样式

来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

本文由大漠根据SaraSoueidan的 Elemen ...

随机推荐

JavaScript中尺寸、坐标

测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '&l ...

在Linux下记录所有用户的登录和操作日志

一般我们可以用history命令来查看用户的操作记录,但是这个命令不能记录是哪个用户登录操作的,也不能记录详细的操作时间,且不完整:所以误操作而造成重要的数据丢失,就很难查到是谁操作的. 在这里我们通 ...

树--四分树(UVa297)

郑重声明: 数据结构这部分内容, 由于博主才学很少(且很浅)的内容, 所以现在所写的(大都是抄的)一些典型例题, 再加上一些自己想法和理解而已, 等博主勤加修炼, 以后会大有补充和改进. 粗浅之处, ...

MySQL 使用方法简单教程

1.启动MySQL服务器实际上上篇已讲到如何启动MySQL.两种方法:一是用winmysqladmin,如果机器启动时已自动运行,则可直接进入下一步操作.二是在DOS方式下运行 d:/mysql/bi ...

HDU1027 Ignatius and the Princess II 【next_permutation】【DFS】

Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

Java与面向对象之随感(1)

大一下学期上完了c++课程,当时自我感觉很良好,认为对面向对象编程已经是身经百战了,但是上了院里HuangYu老师的Java课之后,才发现自己对于面向对象的编程风格的理解只在皮毛,着实惭愧不已. 假设 ...

开源框架SmartImageView的使用

1.SmartImageView为一个网络图片框架,可以将一个网络URL的图片展示在UI上 2.SmartImageView使用 @1Github上下载源代码 @2拷贝原码到工程src下 @3布局配置 ...

Oracle (11g) 修改默认的用户名及密码

Oracle11g的云盘连接 Q1:安装完成Oracle数据后如何登录? A1:打开cmd窗口,输入sqlplus / as sysdba 后回车,以超级管理员身份登录,成功后如图所示(可以看到是or ...

shell脚本--初识CGI

CGI按照百度百科的定义,如下: CGI 是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能.CGI 应用程序能与浏览器进行交互,还可通过数据库API 与数据库服务器等外部数 ...

python学习之旅(六)

Python基础知识(5):基本数据类型之字符串(Ⅱ) 字符串方法 17.join:对字符串进行拼接 x="can" y="li" y.join(x) 结果: ...