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

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

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

我們先來看看完整代碼的實(shí)例：

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

這是一個基礎(chǔ)的代碼，就定義了一個link_1的名字。作用是當(dāng)鼠標(biāo)懸在這個文字的上方的時候，文字就會變色。

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

大家看，這是鼠標(biāo)還沒放上去的效果，現(xiàn)在看看鼠標(biāo)放上去的效果：

這就是鼠標(biāo)移上去的結(jié)果了，是不是和我們設(shè)置的一模一樣。

說完了鼠標(biāo)懸停變色的效果了，現(xiàn)在我們該說說鼠標(biāo)懸停還有的三種效果，我們一起來看下吧：

:hover{font-size：60px;}鼠標(biāo)移上變大

:hover{text-decoration:underline;}鼠標(biāo)移上出現(xiàn)下劃線

:hover{background:#ccc;}鼠標(biāo)移上去變背景色（:{background:#ccc;}鏈接出現(xiàn)背景色）

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

html a標(biāo)簽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= # >

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

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

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

這就是放上去的效果了，是不是很明顯，60像素優(yōu)點(diǎn)大了，但是大家可以用小的像素實(shí)驗(yàn)，有效果就行，現(xiàn)在，我們看看第三個吧：

這第三個效果如圖所示，是把鼠標(biāo)放上去的時候變成了紅色的背景，是因?yàn)槲覀冊O(shè)置了紅色，所以顯示了紅色的背景。這樣的效果還是很明顯的吧。

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

【小編推薦】

css怎么設(shè)置無序列表？css的列表樣式總結(jié)

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

以上就是HTML a標(biāo)簽如何讓鼠標(biāo)懸停變色，css控制a標(biāo)簽鼠標(biāo)懸停樣式詳解?的詳細(xì)內(nèi)容，其它編程語言

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