hover樣式失效的解決方法
阿新 • • 發佈：2018-11-28
發現 除了 utf-8 ack tro .cn link 改變 href
提到 css 的hover 選擇器，想必大家都不陌生（:hover 用於設置鼠標指向某元素上後顯示的樣式）
除了常用的 hover 選擇器，還有3個可以和它搭配使用的選擇器：
:link 設置未被訪問頁面的鏈接
:visited 用於設置已被訪問的頁面鏈接
:active 用於活動鏈接
一般 hover 某元素後，應該會顯示設置的樣式，如下面的"點我"。鼠標指上去後會顯示設置的樣式，這裏為字體變成紅色
問題：最近遇到一個問題，hover 以後的樣式怎麽都不生效，代碼如下
<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title></title> <style> a:hover { color: red; } a:link { color: #000; } a:visited { color: #ccc; } a:active { color: blue; } a { font-size: 30px; } </style> </head> <body> <a href="#">點我</a> </body> </html>
開始我以為是代碼寫錯了，仔細檢查後，發現代碼並沒有錯，這令我十分費解
後來無意中在w3c找到了答案，以前完全沒有註意的一句話：
註：在 CSS 定義中，:hover 必須位於 :link 和 :visited 之後（如果存在的話），這樣樣式才能生效
這時候在看我上面的代碼，hover 寫在 link 和 visited 的前面，此刻茅塞頓開，修改後的代碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> a:link { color: #000; } a:visited { color:#ccc ; } a:hover { color: red; } a:active { color: blue; } </style> </head> <body> <!--被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）--> <a href="#">點我</a> </body> </html>
hover樣式失效的解決方法