用 CSS 設計當滑鼠移經超連結時才顯示底線

也許你常逛一些網站，文章內容的超連結都沒有底線，但是當你將滑鼠移到超連結上頭的時候，底線就出現了，然後當你把滑鼠移開，底線竟然又消失了，這種當滑鼠移經超連結才顯示連結底線的設計手法，可以使用過 CSS 的 text-decoration 文字特效以及 CSS 的動作判斷搭配處理，這樣的技巧算是相當普遍的設計手法，以下我們先介紹 text-decoration 的基本語法，再將整個 CSS 語法做個範例。

CSS text-decoration 基本語法

text-decoration: 文字特效參數;

為了製作滑鼠移經超連結才顯示底線的效果，我們將會使用到的文字特效參數有 none 以及 underline 這兩個，其中 none 的意思是不顯示底線，而 underline 的意思則是要顯示底線，關於詳細的參數用法請直接參閱：CSS text-decoration 將有完整的介紹。

滑鼠移經超連結才顯示底線範例

以上範例呈現結果如

Wibibi 網頁設計教學百科

範例中的 <style> 與 </style> 標籤之間的語法就是 CSS 語法，共有兩個部分，第一行「a{text-decoration:none;}」設定的是超連結平時的狀態，也就是滑鼠還沒移到超連結的時候所呈現的風格，其中 text-decoration:none 代表不顯示底線，第二行使用「a:hover{...}」的意思是當滑鼠移經超連結所呈現的風格，大括號內的「text-decoration:underline」代表要顯示底線，有了這兩行語法的規定，網頁內的超連結就可以在平時不顯示底線，當網友將滑鼠移上去，自然而然出現底線，範例這樣的寫法可以管理整個網頁所有的超連結底線呈現狀態。

延伸閱讀