hover偽類的使用-CSS入門基礎（015）
阿新 • • 發佈：2020-12-19
今天我們接著分享關於超連結樣式的內容。
上節我們知道了“a：hover”可以定義滑鼠懸停超連結a時的樣式。很多初學者都認為hover只限於a標籤使用，如果你這樣理解，就埋沒了css一個功能強大的技巧了。“：hover”偽類是可以定義任何一個元素的滑鼠懸停時的樣式的。
語法：
元素：hover {屬性：屬性值；}元素可以是任意的塊元素和行內元素。
示例程式碼：
<html><head><title>hover偽類</title><styletype="text/css">div{width:200px;height:80px;border:1pxsolidblack;}div:hover{background-color:green;}span{}span:hover { background-color:green;}p{border:1px solid black;}p:hover { background-color:green;}</style></head><body><div>塊元素</div><span>行內元素</span><p>段落</p></body></html>
滑鼠樣式：
在css中，有兩種定義方式，一是瀏覽器滑鼠樣式，二是自定義滑鼠樣式。
語法：
cursor:屬性值；| 滑鼠樣式cursor的屬性值 | |
| 屬性值 | 說明 |
| default | 預設值，白色箭頭 |
| pointer | 手 |
| text | 文字游標 |
| crosshair | 十字架 |
| wait | 等待 |
| help | 箭頭帶問號 |
| move | 帶方向的十字架箭頭 |
| e-resize | 左右擴充套件箭頭 |
| ne-resize | 右上左下擴充套件箭頭 |
| nw-resize | 左上右下擴充套件箭頭 |
| n-resize | 上下擴充套件箭頭 |
| se-resize | 左上右下擴充套件箭頭 |
| sw-resize | 左下右上擴充套件箭頭 |
| s-resize | 上下擴充套件箭頭 |
| w-resize | 左右擴充套件箭頭 |
雖然我們看到cursor屬性取值很多，但是在實際開發中，通常用到的也就是default和pointer兩個屬性值。
示例程式碼：
<html><head><title>滑鼠樣式</title><style type="text/css">div{width:200px;height:50px;margin-bottom:20px;border:1pxsolid black;text-align:center;background-color:green;}#d1 { cursor:default;}#d2 { cursor:pointer;}#d3{cursor:text;}#d4{cursor:crosshair;}#d5 { cursor:wait;}#d6 { cursor:help;}#d7 { cursor:move;}</style></head><body><div id="d1">default</div><div id="d2">pointer</div><div id="d3">text</div><divid="d4">crosshair</div><div id="d5">wait</div><div id="d6">help</div><div id="d7">move</div></body></html>
自定義滑鼠樣式：
語法：
cursor:url("路徑地址"),屬性；示例程式碼：
<html><head><title>自定義滑鼠樣式</title><style>div{width:200px;height:80px;border:1px solid black;}#d1{cursor:url("images/deault.cur"),default}#d2 { cursor:url("images/pointer.cur"),pointer}</style></head><body><divid="d1">default</div><divid="d2">pointer</div></body></html>
這個程式碼中的滑鼠樣式檔案，需要大家自己去百度下載一下，放到相應的路徑中，就可以看到效果了。使用自定義滑鼠樣式，可以打造出更加具有個性化的網站，美觀大方。
本章總結：
去除超連結下劃線，可以使用“text-decoration:none”；
超連結偽類：
a:link，未訪問時的樣式；
a:visited，訪問後的樣式；
a:hover，滑鼠懸停的樣式；
a:actived，滑鼠單擊啟用的樣式；
四個偽類的書序，必須是link、visited、hover、active，不然瀏覽器無法正常顯示。參考記憶順序，可以使用兩個英文單詞“love hate”。一般情況下，只需要兩個狀態即可，就是link和hover。
hover偽類：
我們可以使用：hover偽類來定義任何一個元素在滑鼠懸停時的樣式。
div:hover，p:hover，等等；
滑鼠樣式：
有兩種方式，一種是瀏覽器滑鼠樣式，一種是自定義滑鼠樣式；
