陳凱劭的BLOG

有網友寫信來問，如何做到本站，滑鼠指向「有聯結」的圖檔時，會跑出藍色的框（暗示有聯結），而滑鼠沒指到圖時，此框不會出現，所以也不會干擾畫面美感。

這種作法在一般網站並不常見，原因是一般人很少使用這種縮圖技巧，網頁上呈現的圖，就是切成原始大小，如果圖檔外框一直有個藍色的框，也覺得很醜。

其實這也沒啥啦，不過我也試了一個月才試出讓M$IE也能看得到的結果來。

就是去你的wordpress的Theme，修改 style.css

a img {
border: 2px solid #ffffff;
}

a:hover img {
border: 2px solid #0aa7d6;
background: transparent;
}

a img ///是指當你把圖檔定義為可聯結時
border: 2px solid #ffffff ///是指當你把圖檔外面先加上兩點寬的框，#ffffff是網頁的白色，你可以改成你網頁目前的背景色。
a:hover img ///是指當滑鼠掃過去（但沒有點擊）時，它會有啥變化。
border: 2px solid #0aa7d6; ///是指當你把圖檔外面兩點寬的框在滑鼠掃過去會變啥色，#0aa7d6是我定義的暗示會有聯結的顏色，你可以照抄也可以自行定義你喜歡的顏色。

本文發表於 2008-04-15 且歸類為 站務, 電腦網路. 你可以發表回應於 RSS 2.0 feed. ；你可以 留下回應，或自你的網站引用。