滑鼠移到超連結上才顯示超連結底線的設計語法範例
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#D1 a{
text-decoration:none;
}
#D1 a:hover{
text-decoration:underline;
}
</style>
<div id="D1">
這是一般文字 <a href="#">這是測試超連結</a> 這是一般文字
</div>
範例呈現的實際效果<style type="text/css">
#D1 a{
text-decoration:none;
}
#D1 a:hover{
text-decoration:underline;
}
</style>
<div id="D1">
這是一般文字 <a href="#">這是測試超連結</a> 這是一般文字
</div>
這是一般文字 這是測試超連結 這是一般文字
範例結果中間那一段文字是超連結，當滑鼠移至超連結上方可以看到出線連結底線，可是當滑鼠移走後，超連結底線又不見了，關鍵就在 a 與 a:hover 這兩個差別，對 a 使用「text-decoration:none;」表示要隱藏超連結的底線，a:hover 是判斷滑鼠是否有移到超連結上，如果有的話就觸發 hover 內的 CSS 語法，也就是「text-decoration:underline;」，這語表示要顯示底線，關於 text-decoration 屬性的詳細用法，可以參閱《CSS text-decoration 屬性》篇的介紹，還有很多種不同的特效可以套用。更多相關特效