避免過度

Question

我有一個菜單的簡單鏈接，鼠標閃爍

<a id="Home" href="Amico-Bio-Home-Page"></a> 

到我申請以下樣式

#Home{ 
background-image:url(../Images/Menu/home.png); 

背景重複：不重複; border：none; display：block; height：70px; text-decoration：none; width：78px; float：left; padding：0 7px; }

#Home:hover { 
background-image: url(../Images/Menu/homeOn.png); 
} 

當我檢查鏈接的圖像交換。

交換圖像時，鏈接消失一瞬間。

你知道有什麼方法可以避免嗎？

感謝

Answer 1

精靈： Is css-sprite a good technique?

Answer 2

您應該使用像精靈表。有關它們的詳細教程看這裏：http://css-tricks.com/css-sprites/

Answer 3

HTML部分

<a><img src="homeOn.png" alt="" width="" height="" /></a> 

CSS部分

a {height:px;width:px;background-image:url(home.png)} 
a:hover img {visibility:hidden} 

額外的獎金不多IE6 flicker

Answer 4

我建議完全避免圖像，並使用CSS設計您的鏈接。您可以使用CSS3背景和邊框漸變，文字陰影等來完成很多任務。檢出：http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/和http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques的靈感和代碼。正確。