2014/02/12

為 a:hover 的連結和底線指定不同的顏色

原理:
連結所使用的文字先套上 <span> 再套上 <a>,
連結的文字顏色,由 <span> 使用 CSS 的 color 設定;
底線的顏色,由 a:hover 使用 CSS 的 color 設定。

範例:

<style>

/* 準備工作:移除連結的底線,僅在 a:hover 時給連結加上底線 */
a {text-decoration:none}
a:hover {text-decoration:underline}

/* 底線的顏色 */
a:hover {color:red}

/* 連結的文字顏色 */
a span {color:blue}

</style>
<a href="http://www.google.com.tw"><span>連結所使用的文字</span></a>


滑鼠移動到連結上面時,所顯示的效果:
連結所使用的文字

若您希望滑鼠移動到連結上面時,連結的文字顏色改變,就使用 CSS 設定 span:hover 的 color。範例:

<style>

/* 準備工作:移除連結的底線,僅在 a:hover 時給連結加上底線 */
a {text-decoration:none}
a:hover {text-decoration:underline}

/* 底線的顏色 */
a:hover {color:red}

/* 連結的文字顏色 */
a span {color:blue}

/* 滑鼠移動到連結上面時,連結的文字顏色改變 */
a span:hover {color:green}

</style>
<a href="http://www.google.com.tw"><span>連結所使用的文字</span></a>


滑鼠移動到連結上面時,所顯示的效果:
連結所使用的文字

沒有留言 :

張貼留言