HTML a標簽如何讓鼠標懸停變色，css控制a標簽鼠標懸停樣式詳解?

首先我們先來看看html中的a標簽鼠標懸停的時候變色：

大家應該都知道html中的a標簽鼠標懸停的css屬性吧，沒錯，今天我們說的就是它。

:hover：這是在之前用a標簽說css樣式的時候說過。這個鼠標懸停的功能還不少呢，今天我們就來說說html中的a標簽懸停的時候變色。這個大家應該都常用到吧。

我們先來看看完整代碼的實例：

 !doctype html  html  head  meta charset= utf-8  title PHP  /title  style .link_1:hover{color:pink;} /style  /head  body  a href= # >

這是一個基礎的代碼，就定義了一個link_1的名字。作用是當鼠標懸在這個文字的上方的時候，文字就會變色。

我們來看在谷歌瀏覽器中的顯示效果：

大家看，這是鼠標還沒放上去的效果，現在看看鼠標放上去的效果：

這就是鼠標移上去的結果了，是不是和我們設置的一模一樣。

說完了鼠標懸停變色的效果了，現在我們該說說鼠標懸停還有的三種效果，我們一起來看下吧：

:hover{font-size：60px;}鼠標移上變大

:hover{text-decoration:underline;}鼠標移上出現下劃線

:hover{background:#ccc;}鼠標移上去變背景色（:{background:#ccc;}鏈接出現背景色）

和上文說的一樣，我們在鼠標懸停中可以做很多事，我們現在把它們一起展現出來，（想學更多css樣式相關的知識就到PHP css學習手冊欄目學習）現在讓我們看看代碼和效果吧

html a標簽css控制樣式完整代碼：

 !doctype html  html  head  meta charset= utf-8  title PHP  /title  style .link_1:hover{color:pink;}.link_2:hover{font-size:60px;}.link_3:hover{background:red;} /style  /head  body  a href= # >

如上面的我們設置了三個css樣式的代碼，第一個是變色，第二個是變大的，第三個是變背景的。

我們先來一個個的看效果吧，第一個看過了，我們就直接看第二個：

如圖，這是一個都沒動過的樣子，現在我們把鼠標放在第二個連接上面看看效果：

這就是放上去的效果了，是不是很明顯，60像素優點大了，但是大家可以用小的像素實驗，有效果就行，現在，我們看看第三個吧：

這第三個效果如圖所示，是把鼠標放上去的時候變成了紅色的背景，是因為我們設置了紅色，所以顯示了紅色的背景。這樣的效果還是很明顯的吧。

好了，以上就是我們這篇文章說的html a標簽的鼠標懸停變色和鼠標懸停的其它樣式的文章了（想學更多css樣式的知識，就到PHP css學習手冊欄目學習）。有問題的可以在下方提問。

【小編推薦】

css怎么設置無序列表？css的列表樣式總結

如何利用css來設置文本的背景顏色？css設置背景顏色代碼詳解

以上就是HTML a標簽如何讓鼠標懸停變色，css控制a標簽鼠標懸停樣式詳解?的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。