捐血一袋救人一命

2015年8月25日 星期二

網頁 Menu 文字變色及換圖

說穿了很簡單,就是定義 a:hover 等相關 CSS 設定

設定超連結預設的樣式

a:link {
color:#0000ff;                // 超連結文字的顏色
text-decoration:none;   // 不顯示超連結的底線
}

設定點擊(訪問)過的超連結樣式

a:visited {
color:#0000ff;                // 超連結文字的顏色
text-decoration:none;   // 不顯示超連結的底線
}

設定當滑鼠游標指到超連結時的樣式,只要指定與 a 或 a:link 不同的 background image 就可以做到變換影像的效果

a:hover{
color:#ff0000;                // 滑鼠指到超連結時,文字變化的顏色
text-decoration:none;   // 不顯示超連結的底線
background:url(another_image_full_path.jpg);
background-repeat:no-repeat;
background-size:16px 16px;
background-position:0px center;
padding-left: 20px;
}

設定當點擊超連結(滑鼠左鍵沒放開)時的樣式

a:active {
color:#ff00ff;                // 超連結文字的顏色
text-decoration:none;   // 不顯示超連結的底線
}

不用 CSS 時,用 Javascript 也能做到,不過使用 CSS 之後,不用任何 Coding 就可以達到這種動態的效果。

0 意見: