hover样式失效的解决方法

     提到 css 的hover 选择器,想必大家都不陌生(:hover 用于设置鼠标指向某元素上后显示的样式)

   除了常用的 hover 选择器,还有3个可以和它搭配使用的选择器:

  :link 设置未被访问页面的链接

  :visited 用于设置已被访问的页面链接

  :active 用于活动链接

  一般 hover 某元素后,应该会显示设置的样式,如下面的"点我"。鼠标指上去后会显示设置的样式,这里为字体变成红色

  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>

  

上一篇:CI框架源码阅读笔记6 扩展钩子 Hook.php


下一篇:js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小