網頁 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 就可以達到這種動態的效果。