2012-08-16 52 views
0

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

css file here

謝謝!

page here

+1

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

+0

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

回答

0

或者,您可以將圖標與背景分開。也就是說,使用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; 

} 

希望有所幫助!

+0

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

+0

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

+0

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

0

您需要使用多個背景,因爲上懸停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-,...)

+0

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

+0

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

+0

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