:hover 設置元素在其鼠標懸停時的樣式。
也就是鼠標箭頭懸浮在該位置上,引發樣式變化.當鼠標移開后,樣式復原.
而你的網頁中如果還存在這些偽類選擇器,就必須按照以下順序去書寫.(畢竟是人家造就出的問題,也只能按解有效的方法去解決)
a:link {} //設置超鏈接a在未被訪問前的樣式。(即a標簽未曾點擊時的樣式,往往在點擊過一次a標簽后,這效果就必須重置游覽器了)
a:visited {} //設置超鏈接a在其鏈接地址已被訪問過時的樣式。(即點擊a標簽后,所呈現的樣式.)
a:hover {} //設置元素在其鼠標懸停時的樣式。
a:active {} //設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。(按住的那個狀態才會顯現出的樣式)
往往只有給<a>標簽本身添加個樣式,就能解決顏色不匹配的問題.
<style>
a:link {
...
}
a:visited {
...
}
a:hover {
...
}
a:active {
...
}
</style>
這是最簡單的鼠標懸浮背景變色的例子,也是應用導航中最常見的例子.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> nav{ //導航的一大整塊 width: 100%; background: #284f86; overflow: hidden; } .ju{ //居中的子塊 width: 80%; margin: 0 auto; } .ju ul{ //去li的點,放li里也行 list-style-type: none; } .ju ul li{ //將li浮動,橫向排列. padding: 0 10px; float: left; overflow: hidden; //清除浮動,防止塌陷 } .ju ul li a{ //給a標簽設置樣式 padding: 10px 20px; color: #fff; //如果這里不設置文字顏色,很可能會出現文字顏色異常問題 display: block; //由於a標簽不是塊標簽,所以就只能將其變成塊標簽 text-decoration: none; //去下划線的 } .ju ul li a:hover{ //這部分就是鼠標懸浮部分 background: #fff; //背景顏色為白色,可以按網頁色調修改 color: #f00; //懸浮后的顏色變化 border-radius: 5px; //圓角...總之就在這里添加效果 } </style> </head> <body> <nav> <div class="ju"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">教科書</a></li> <li><a href="#">工具書</a></li> <li><a href="#">繪圖書</a></li> <li><a href="#">程序書</a></li> </ul> </div> </nav> </body> </html>