呆丸北拜已搬家至 Blogger

聲明：不支援 IE6。因為有用到 a:hover img {display:none} 這樣的形式，經測試 IE6 中無效、IE7 和 IE8 RC1 沒問題。所以應該是 IE6 的 BUG。
預設不顯示連結使用的圖片，而是使用一個維度相同的問號圖片替代。a:hover 時才顯示連結所使用的圖片。

示例 HTML 原始碼：

<a href="http://localhost"><img src="50.png"></a>

未加載 CSS 時的效果（連結使用的圖片維度是 50x50 像素）：



第一階段
首先隱藏連結使用的圖片：a img {display:none}。
連結使用的圖片預設會有一個難看的 border，將這個 border 消去：a img {border:0}。

然後指定連結的問號背景圖片：a {background:url('question.gif') no-repeat}

連結使用的圖片在隱藏後連結就成為空的、會整個消失不顯示，包括連結使用的背景圖片。為了讓連結能夠顯示背景圖片，偶們給連結指定同背景圖片相同的維度：a {width:50px; height:50px;}，但是 CSS 的 width 和 height 不能套用於 <a>，除非將 <a> 變為 block：a {display:block}。

第一階段的效果：


第二階段（從此處開始為 IE6 所不支援）
a:hover 時顯示連結所使用的圖片。使用圖片的固有屬性 inline 來覆蓋將圖片隱藏時所使用的 none：
a:hover img {display:inline}

最終效果：

所使用的 CSS 彙整

a img {display:none; border:0}

a {
	background:url('question.gif') no-repeat;
	width:50px; height:50px; display:block}

a:hover img {display:inline}