滑鼠移到超連結上才顯示超連結底線的設計語法

滑鼠移到超連結上才顯示超連結底線的設計語法會用到的是 CSStext-decoration 屬性以及瀏覽器對 a 屬性的監聽功能,簡單來說,我們可以先將網頁超連結的文字底線利用 text-decoration 移除,再利用瀏覽器對 a 屬性監聽來判斷滑鼠是否有移至超連結上,如果有的話就再利用 text-decoration 屬性讓超連結底線顯示出來,如此一來就可以創造出滑鼠移到超連結上才顯示超連結底線的特效囉!

滑鼠移到超連結上才顯示超連結底線的設計語法範例
<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>
範例呈現的實際效果
這是一般文字 這是測試超連結 這是一般文字
範例結果中間那一段文字是超連結,當滑鼠移至超連結上方可以看到出線連結底線,可是當滑鼠移走後,超連結底線又不見了,關鍵就在 a 與 a:hover 這兩個差別,對 a 使用「text-decoration:none;」表示要隱藏超連結的底線,a:hover 是判斷滑鼠是否有移到超連結上,如果有的話就觸發 hover 內的 CSS 語法,也就是「text-decoration:underline;」,這語表示要顯示底線,關於 text-decoration 屬性的詳細用法,可以參閱《CSS text-decoration 屬性》篇的介紹,還有很多種不同的特效可以套用。

更多相關特效
© Copyright webtech.tw Since 2010