前端——背景图片显示以及悬浮状态下变色的情况

前言

最近搞了一个项目，几乎全是前端的东西；

以前，前端的东西很少做，所以现在做起来比较吃力；

对于一些我认为比较难的地方，在这里专门记录一下，以便于后期遇到了可以查看

（主要是脑子记不住啊！O(∩_∩)O哈哈~）

遇到的问题以及解决

在一个div里面添加背景图片，并且在悬浮状态下变色，

这里的变色是字体和图片一起变色：

HTML部分：

<div class="fjxx-icon">
    <a class="fjxx-fjmc" href="#: data[i].FJDZ #" download title="点击下载文件">#: data[i].FJMC#</a>
</div>

CSS部分：

.fjxx-icon {
    margin: 0.5% 0 0.5% 1.5%;
    color: #C8E4F7;
    background: url(../../../../icons/zbzs-zbdt-xz-n.png) no-repeat;
    background-size: 6% 90%;
    background-position-x: 100%;
}
.fjxx-fjmc{
    display: block;
    color: #C8E4F7;
    font-size: 1.1vw;
    text-decoration: none;
}
/*注意：这里在悬浮的时候，需要换背景图片，而且图片的其他属性也要列出来*/
.fjxx-icon:hover{
    background: url(../../../../icons/zbzs-zbdt-xz-h.png) no-repeat;
    background-size: 6% 90%;
    background-position-x: 100%;
}
/*注意：这里首先悬浮外部div，然后让内部的字体变色，字体的其他属性就不会变化了*/
.fjxx-icon:hover .fjxx-fjmc{
    color: #ffb317;
}

“附件一”悬浮前后效果对比：

悬浮前：

悬浮后

OK，GAME OVER!