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样式失效的解决方法的更多相关文章
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
- 移动端ios下H5的:active样式失效的解决方法
在body上绑定一个touchstart事件,空函数就行: document.body.addEventListener('touchstart', function(){}, false) 或者在b ...
- IE7的overflow失效的解决方法
IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...
- margin-top失效的解决方法
异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...
- ode.js 版本控制 nvm 和 n 使用 及 nvm 重启终端失效的解决方法
今天的话题包括2个部分 node.js 下使用 nvm 或者 n 来进行版本控制 nvm 安装node.js 版本后,重启终端 node , npm 环境变量失效 第一部分 用什么来管理 node.j ...
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- "字体arial不支持样式regular"的解决方法
软件报错,提示“字体arial不支持样式regular”的提示,这是由于字体arial缺失导致的, “字体arial不支持样式regular”的解决方法如下: 方法/步骤 1.用户需要先下载arial ...
- IE8下部分方法失效的解决方法
1.IE8下String的Trim()方法失效的解决方法 用jquery的trim()方法,$.trim(str)就可以了: 例:_id.trim() !='' 改为 $.trim(_id) != ...
- IIS上发布站点后URL重写失效的解决方法
在发布网站时URL重写有可能会失效,如果失效的话就需要您设置一下IIS:1.Windows XP系统或Windows 2003系统等使用以下方法:>打开IIS,主目录-〉配置-〉映射-〉在窗体左 ...
随机推荐
- linux ssh反向代理
参考:https://segmentfault.com/a/1190000002718360 内外运行:sshpass -p 123456 ssh -fNR 5000:localhost:22 ser ...
- java用POI操作excel——随便写一下，最基础的东西
前两天部门实施在做一个东西,需要把客户放在Excel中的数据导入到Oracle数据库中,我就想着直接写一个模板,必要的时候改一下实体类应该可以解放实施同事的双手,不过在实际写的过程中,还是碰到很多问题 ...
- CentOS6系统编译部署LAMP(Linux, Apache, MySQL, PHP)环境
我们一般常规的在Linux服务器中配置WEB系统会用到哪种WEB引擎呢?Apache还是比较常用的引擎之一.所以,我们在服务器中配置LAMP(Linux, Apache, MySQL, PHP)是我们 ...
- python3 第二十八章 - 内置函数之List相关
Python包含以下函数: 序号 函数 实例 1 list.append(obj)在列表末尾添加新的对象 2 list.count(obj)统计某个元素在列表中出现的次数 3 list.ext ...
- pl/sql调试存储过程
1.找到对应的存储过程 2.在存储过程名称上右键,选择Test 3.点击1标识的按钮(begin debugger),选择2开始调试 4.存储过程如需参数,需要在右侧下方的表格区域(3)填入对应的值即 ...
- squid日志详解
quid的日志很重要.常常要了解的,其中最重要的就是命中率啦,不然反向代理做的用就不大. cat access.log|gawk ‘{print $4}’|sort|uniq -c|sort -nr ...
- 口试C#概念
C#概念 装箱拆箱: 值类型与引用类型:值类型:System.ValueType(继承自System.Object)引用类型:System.Object 反射:反射提供一种编程方式,让程序员可以在程序 ...
- Vue控制路由滚动行为
跳转路由时,要求跳转到指定路由的某个地方,可以使用scrollBehavior方法控制. 用法: scrollBehavior(to,from,savedPosition){ } scrollBe ...
- 转发：已知rsa的模数和指数 生成pem公钥文件
1.安装cryptographysudo pip3 install cryptography 2.代码 #coding:utf8# pupulate-pub-key-v3.py#from crypto ...
- Oracle创建物化视图
1.物化视图语法 create materialized view [view_name] refresh [fast|complete|force] [ on [commit|demand] | s ...