前言

最近搞了一個專案，幾乎全是前端的東西；

以前，前端的東西很少做，所以現在做起來比較吃力；

對於一些我認為比較難的地方，在這裡專門記錄一下，以便於後期遇到了可以檢視

（主要是腦子記不住啊！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!