使用背景圖像更改懸停圖標的顏色

我的頁腳中有幾個社交媒體圖標需要在懸停時從白色變爲黃色。我設法產生了這種效果，只是在頂部有一個額外的不受歡迎的圖標，並且它仍然是白色的。使用背景圖像更改懸停圖標的顏色

這裏是我做了什麼一個例子：

HTML

<li> 
    <a class="facebook" href="link" target="_blank"> 
    <img src="images/00_social media icons/facebook_white.png"> 
    </a> 
</li>

CSS

.facebook{ 
    background-image: url('images/00_social media icons/facebook_white.png'); 
    background-repeat:no-repeat;} 

.facebook:hover{ 
    background-image: url('images/00_social media icons/facebook_yellow.png'); 
    background-repeat:no-repeat;}

預先感謝您！

來源

2014-07-26 krubkiewicz

感謝您分享您的代碼，順便說一句，歡迎來到SO！ – jtheletter

使用div而不是img爲您的按鈕，並應用background-image規則給它，而不是在包裝a。

DEMO：http://jsbin.com/puqej/3/edit

HTML：

<ul> 
    <li> 
    <a href="link" target="_blank"> 
     <div class="facebook">Facebook 
     </div> 
    </a> 
    </li> 
</ul>

CSS：

.facebook { 
    width: 100px; 
    height: 40px; 
    background-image: url('http://placekitten.com/200/80'); 
    background-repeat: no-repeat; 
    background-size: 100px 40px; 
    text-indent: -9999px; 
} 

.facebook:hover { 
    background-image: url('http://placekitten.com/210/90'); 
} 

li { 
    list-style: none; 
}

來源

2014-07-26 06:33:10 jtheletter

輝煌，謝謝！ – krubkiewicz

請注意，您將圖標既作爲錨點內的獨立圖像，又作爲錨點的背景圖像。只是刪除img標籤（並確保你的錨具有合適的尺寸，顯示背景圖片）

來源

2014-07-26 06:27:56 Ofir

嘗試在CSS做這樣的事情：

.facebook { 
    display: inline-block; 
    background-image: url('images/00_social media icons/facebook_white.jpg'); 
    background-repeat:no-repeat; 
    width: 20px; 
    height: 20px; 
    background-size: 20px; 
} 
.facebook:hover { 
    background-image: url('images/00_social media icons/facebook_yellow.jpg'); 
    background-repeat:no-repeat; 
}

而在HTML：

<li> 
    <a href="link" target="_blank"> 
    <div class="facebook"> 
    </div> 
    </a> 
</li>

重要的是儘量不要在這裏發佈醜陋的代碼。

來源

2014-07-26 06:45:29

使用背景圖像更改懸停圖標的顏色

回答

相關問題