【发布时间】：2015-07-14 01:29:34
【问题描述】：
最初的问题含糊不清。
我正在编辑一个使用三个“字体真棒”字形图标的 Web 模板。当我将鼠标悬停在它们上方时，它们会从白色平滑过渡到橙色。我在 icomoon.io/app 页面上通过搜索“paint”找到了一个我非常喜欢的图标。
他们为我提供了一个参考链接，可以放入我的 html 正文中。即：
<symbol id="icon-paint-format" viewBox="0 0 1024 1024">
<title>paint-format</title>
<path class="path1" d="M1024 576v-384h-192v-64c0-35.2-28.8-64-64-64h-704c-35.2 0-64 28.8-64 64v192c0 35.2 28.8 64 64 64h704c35.2 0 64-28.8 64-64v-64h128v256h-576v128h-32c-17.674 0-32 14.326-32 32v320c0 17.674 14.326 32 32 32h128c17.674 0 32-14.326 32-32v-320c0-17.674-14.326-32-32-32h-32v-64h576zM768 192h-704v-64h704v64z"></path>
然后通过使用来引用它：
<svg class="icon icon-paint-format"><use xlink:href="#icon-paint-format"></use></svg>
3 个图标的 html 如下所示：
<div class="work-grids">
<div class="col-md-4 work-grid">
<span class="col-md-5 w-icon"> <i class="fa fa-phone"> </i></span>
<div class="col-md-7 work-info">
<h4>Research</h4>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p>
</div>
</div>
<div class="col-md-4 work-grid center-work-grid">
<span class="col-md-5 w-icon"> <i class="fa fa-usd"></i></span>
<div class="col-md-7 work-info">
<h4>Design</h4>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p>
</div>
</div>
<div class="col-md-4 work-grid">
<span class="col-md-5 w-icon"><img src="images/paint-format.svg"></span>
<div class="col-md-7 work-info">
<h4>Develop</h4>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p>
</div>
</div>
<div class="clearfix"> </div>
<div class="work-map">
<span> </span>
</div>
</div>
<!---- //End-work-grids----->
从我使用的第三个 div 类可以看出：
<img src="images/paint-format.svg">
导入 svg 图标。
现在，三个图标对应的css是这样的：
/*---- start-work----*/
.work{
background: #4F4F57;
padding: 5em 0;
}
.work-head h3,.work-head p{
color:#FFF;
}
.work-grid span{
width:140px;
height:140px;
display:inline-block;
background:#ff9000;
border:6px solid #ffddb0;
border-radius:30em;
-webkit-border-radius:30em;
-moz-border-radius:30em;
-o-border-radius:30em;
-ms-border-radius:30em;
z-index: 999;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
.w-icon{
text-align:center;
}
.w-icon i{
color: #fff;
font-size: 2.2em;
margin-top: 1.4em;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
.work-info h4{
color: #FFF;
font-weight: 600;
font-size: 1.6em
}
.work-info p{
color: #FFF;
font-size: 0.875em;
}
.work-grids{
margin-top:4em;
}
.center-work-grid{
margin-top: 8em;
}
.work-grids{
position: relative;
}
.work-map{
width: 850px;
height: 237px;
background: url(../images/work-map.png) no-repeat 0px 0px;
display: inline-block;
position: absolute;
top: 0px;
left:10%;
}
.work-grid:hover span{
background:#F3F3F3;
border-color:#EBEBEB;
}
.work-grid:hover .w-icon i{
color:#ff9000;
}
/*---- //End-work----*/
我从模板中编辑的所有内容都是将非悬停图标颜色 .w-icon 更改为 #fff（白色），然后当我的鼠标悬停在它们上方时让它们平滑过渡到 #ff9000（橙色）。前两个字形图标成功了，而第三个则不成功：
A) 未将鼠标悬停在和上时显示为白色； B) 悬停时过渡（平滑）到橙色
我希望我已经解决了这个问题
【问题讨论】：
-
我在您的第二组 HTML 标记中没有看到您的
.paint-icon选择器。当您将 SVG 作为图像标签的来源时，我不相信您可以设置 SVG 元素的样式。您没有使用自定义 icomoon 图标字体是否有原因？ -
你是对的，但是当我将选择器改回 .work-grids 或 .w-icons 时，它也不会改变任何东西。
-
对什么？你的问题有点模糊，你的回答也是。这将很难提供帮助，因为代码和问题似乎不一致。
-
图片不是交互式的。您需要通过其他标签加载它们，例如
<object>或<iframe>或内联加载它们。 -
@hungerstar 对不起。当我将