本文主要介紹a hover屬性的用法，由此擴展出兩種常見的鏈接效果，為鏈接增加背景色和背景圖片，大大改觀鏈接美觀度，特別是第二種方法，鼠標經過鏈接時，增加背景圖片，可在此基礎上繼續完善，形成一個漂亮的網頁菜單，下面來看整個實例的代碼：
用到了一張圖片：，右鍵圖片另存為。
01
<!DOCTYPE Html>
02
<
Html
>
03
head
04
meta
charset
=
"utf-8"
/>
05
title
>CSS改變背景色，為鏈接增加hover時的背景圖片</
06
style
07
.abc a{ color:#000}/*超鏈接顏色：黑色 */
08
.abc a:hover{color:#FFF; background:#00F}
09
/*鼠標經過懸停超鏈接時字體顏色為白色，背景為藍色*/
10
.def a{ color:#000; padding:10px 10px; line-height:30px}/*超鏈接顏色為黑色 */
11
.def a:hover{color:#FFF; background:url(https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016123017000632.gif) no-repeat center}
12
/*鼠標經過懸停超鏈接時字體顏色為白色，背景為圖片*/
13
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
14
#n a{ padding:0 4px; color:#333}
15
</
16
17
body
18
p
><
strong
>鼠標經過文字鏈接背景變為有顏色背景</
a
>效果如下：</
19
div
class
"abc"
href
"/"
>Html5</
20
></
21
> </
22
>鼠標經過文字鏈接背景變為圖片</
23
24
"def"
25
26
27
運行環境：IE6+及以上，火狐、Chrome、Safari、Opera等。
，右鍵圖片另存為。