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,主目录-〉配置-〉映射-〉在窗体左 ...
随机推荐
- 移值UCOS2到M4核与M3核的区别
之前移值过ucos2到stm32f2系列的单片机,这个单片机是属于arm的m3内核的.最近在学习永磁同步电机的控制,对于这个电机的控制,有比较多的数学计算,甚至于还有浮点的运算.所以用到了stm32f ...
- 基于SoftRoCE 了解RDMA
RDMA是基于IB技术的内存直接传送,无需内核参与,硬件网卡搞定.IB需要HPC领域的专用硬件,ROCE则是RDMA协议在普通以太网卡的实现,RoCEv1是在MAC上的二层封装,局域网内可以,要通过路 ...
- 《笨方法学Python》加分题17
题目通过前学习的文件操作把一个文件中的内容拷贝到另一个文件中,并使用 os.path.exists 在拷贝前判断被拷贝的文件是否已经存在,之后由用户判断是否继续完成拷贝. 新知识os.path.exi ...
- Numpy 矩阵库（Matrix）
Numpy 中包含了一个矩阵库 numpy.matlib, 该模块中的函数返回的是一个矩阵, 而不是 ndarray 对象. 一个 m * n de 矩阵是一个 有 m 行(row) n 列(colu ...
- IIS配置支持跨域请求
对于初次在IIS部署网站的同学,很容易忽略或不知道如何配置使其网站支持跨域请求,这里介绍一个最基础的方式,配置HTTP响应标头. 在IIS上选择HTTP响应标头,选择添加自定义响应标头,通常我们会添加 ...
- MySQL导入数据报 Got a packet bigger than‘max_allowed_packet’bytes 错误的解决方法
MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致大数据写入或者更新失败. 通过终端进入mysql控制台,输入如下 ...
- 【机器学习】K均值算法（II）
k聚类算法中如何选择初始化聚类中心所在的位置. 在选择聚类中心时候,如果选择初始化位置不合适,可能不能得出我们想要的局部最优解. 而是会出现一下情况: 为了解决这个问题,我们通常的做法是: 我们选取K ...
- Effective C++ 笔记：条款 34 实现继承和接口继承
Differentiate between inheritance of interface and inheritance of implementation. 行为含义 声明一个pure virt ...
- 《Linux就该这么学》第十八天课程
1.使用MariaDB数据库管理系统 今天没什么笔记,就不发了.想深入学习的可以前往原创地址:https://www.linuxprobe.com/chapter-18.html 图18-1 Mari ...
- IDEA中通过工具类实现对数据库的增删改查
package com.hu.dao; import com.hu.entity.Student; import java.util.List;import java.util.Map; public ...