首頁 > 文章 > web前端 > css滑鼠懸停變色：超連結字體隨滑鼠懸停顏色改變實現

css滑鼠懸停變色：超連結字體隨滑鼠懸停顏色改變實現

云罗郡主轉載: 2018-11-22 17:30:5228663瀏覽

這篇文章帶給大家的內容是關於css滑鼠懸停變色：超連結字體隨滑鼠懸停顏色改變實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

css設定超連結滑鼠懸停字體上時字體變顏色，css設定滑鼠懸停變色佈局。

滑鼠懸停字體上文字變色，通常針對超連結錨文本字體顏色改變，使用了偽類：hover。

a{ color:#00F}
a:hover{ color:#F00}

解釋：預設超連結字體顏色為藍色“color:#00F”，滑鼠懸停時字體顏色為紅色“ color:#F00”。可見要改變滑鼠懸停顏色就設定a:hover

1、div css實例代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停颜色改变 实例</title>
<style>
a{ color:#00F}/* 默认超链接字体颜色为蓝色 */
a:hover{color:#F00}/* 默认超链接字体悬停时颜色为红色 */
.zhiding a{ color:#090}
.zhiding a:hover{ color:#F0F}
</style>
</head>
<body>
<p>欢迎来到<a href="http://www.php.cn/">php</a>学习php技术！</p>
<p class="zhiding">指定对象<a href="#">超链接</a>字体悬停颜色改变！</p>
</body>
</html>

效果如下:

css滑鼠懸停變色：超連結字體隨滑鼠懸停顏色改變實現

##說明：

1）、設定預設網頁超連結字型為藍色，滑鼠懸停時是紅色（a{ color:#00F} a:hover{color:#F00}）;

2）、同時設定指定物件內超連結字體預設為綠色，滑鼠懸停時字體顏色為粉紅色。

3、總結

css滑鼠懸停變色應用超連結偽類「：hover」設定css樣式改變，除了顏色改變，還可以定義滑鼠懸停字體大小、字體加粗、背景等樣式改變，作為字體顏色改變靈活運用設定其它CSS樣式。

以上就是對css滑鼠懸停變色：超連結字體隨滑鼠懸停顏色改變實現的全部介紹，如果您想了解更多有關

CSS3教程，請關注PHP中文網。

以上是css滑鼠懸停變色：超連結字體隨滑鼠懸停顏色改變實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：thinkcss.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：網頁背景怎麼設定為純黑色css樣式下一篇：網頁背景怎麼設定為純黑色css樣式

看更多