Question

原始问题含糊不清。

我正在编辑一个使用三个“font-awesome”字形的网页模板。当我将鼠标悬停在它们上面时，它们会顺利地从白色过渡到橙色。我找到了一个我非常喜欢的图标，可以在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（橙色），因为我的鼠标悬停在它们上面。前两个glyphicons是成功的，同时第三个不会：

A）当没有徘徊时似乎是白色的; B）悬停在

上时（平滑地）转换为橙色

我希望我已经解决了这个问题

Answer 1

TL; DR。跳过这个：

A）当没有徘徊时似乎是白色的; B）过渡（顺利地）在悬停在
上时变成橙色

我之前做过这些演示，但我认为你会发现它们很有帮助：

SVG悬停不会像预期的那样改变颜色

1 个答案: