本Blog聯結圖檔CSS程式碼

本文發表於 2008 年 04 月 15 日 02:24

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

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

其實這也沒啥啦,不過我也試了一個月才試出讓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是我定義的暗示會有聯結的顏色,你可以照抄也可以自行定義你喜歡的顏色。

Facebook回應

回應數

2 回應 針對 “本Blog聯結圖檔CSS程式碼”

  1. 訪客 說:

    很简单的效果嘛

  2. 訪客 說:

    簡單 可是非常實用 !
    感謝 ~

發表回應

留言內含URL、廣告字,會被系統視為廣告而扣住不顯示,請待站長解除。
留言涉私密請直接寫email給站長

本Blog其他隨機文章(五篇)