hover样式失效的解决方法
Posted tu-0718
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了hover样式失效的解决方法相关的知识，希望对你有一定的参考价值。
提到 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样式失效的解决方法的主要内容，如果未能解决你的问题，请参考以下文章