CSS漸變，背景圖像在懸停時消失

頂部nov上的facebook標誌消失在懸停上。我有css漸變應用，沒有圖像除了fb標誌本身。有沒有辦法讓徽標在懸停狀態下保持可見狀態？CSS漸變，背景圖像在懸停時消失

css file here

謝謝！

page here

來源

2012-08-16 Kim

請在像http://jsfiddle.net或http://cssdesk.com – TheZ 2012-08-16 16:21:45

這樣的網站上設置一個較小的測試用例（儘可能少的代碼，只是爲了說明問題）對不起，我忘了發帖鏈接到頁面： http://www.hauppauge.com/index.htm – Kim 2012-08-16 16:28:14

或者，您可以將圖標與背景分開。也就是說，使用CSS將圖標放置在「facebook」文本之前，以便它完全獨立於後臺選擇器。像這樣：

li.facebook a::before { 

content: ""; 
position: absolute; 
top: 50%; 
left: 0; 
width: 16px; /* Width of your FB icon */ 
height: 16px; /* Height of your FB icon */ 
margin-top: -9px; 
background-image: url("path_to_your_FB_icon.png"); 
background-repeat: no-repeat; 

}

希望有所幫助！

來源

2012-08-16 16:45:50 cdwyer

值得注意的是，IE 7和更低版本將不支持僞元素：before或：after。 http://css-tricks.com/browser-support-pseudo-elements/ – cdwyer 2012-08-16 16:51:01

謝謝！我不敢相信我沒有想到這一點。非常容易。我不會支持較老的IE。謝謝！ – Kim 2012-08-16 17:24:34

沒問題;很高興它對你有效！ =） – cdwyer 2012-08-16 17:27:12

您需要使用多個背景，因爲上懸停Facebook的背景是由梯度覆蓋。

ul#topnav li.facebook a:hover { 
background-image: url("../pics/facebook-icon.png"), 
      linear-gradient(center top , #444444 0%, #A1A1A1 6%, #575757 100%); 
/* facebook icon is on top of a linear gradient */ 
background-repeat: no-repeat, repeat; 
background-position: 8px 2px, 0 0; 
}

當然，您需要爲所有供應商前綴添加此規則。（-moz-,-webkit-，...）

來源

2012-08-16 16:35:14

嗨，謝謝你的迴應！你的代碼和我的外觀不一樣，我像這樣添加到了CSS中，但是現在我失去了漸變並且圖像正在移動。 – Kim 2012-08-16 17:08:27

你仍然需要'背景位置'和'重複'。這也支持多種背景，但很難找出如何將其與當前代碼結合使用，因爲您的css文件非常大，而且您的html文件非常複雜。如果你想用一個簡單的例子做一個jsfiddle，那真的很有幫助。 – 2012-08-16 17:13:24

另外，請確保您刪除了'ul＃topnav li.facebook a：hover'的舊樣式聲明。 – 2012-08-16 17:17:59

CSS漸變，背景圖像在懸停時消失

回答

相關問題