前言
最近搞了一个项目，几乎全是前端的东西；
以前，前端的东西很少做，所以现在做起来比较吃力；
对于一些我认为比较难的地方，在这里专门记录一下，以便于后期遇到了可以查看
（主要是脑子记不住啊！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; }
“附件一”悬浮前后效果对比：
悬浮前：
悬浮后
