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,主目录-〉配置-〉映射-〉在窗体左 ...
随机推荐
- Mad Libs游戏，华氏与摄氏转换
华氏温度 与 摄氏温度的相互转换 公式:摄氏 ℃＝5/9(°F-32) 华氏°F＝ ℃×9/5+32 # -*- coding: UTF-8 -*- num=input('输入摄氏温度:') num ...
- oo第12次作业
一.规格化设计发展历史 在上世纪60年代,由于程序猿们难以忍受超级难懂的机器语言和稍微好懂一点点的汇编语言,便发明了结构化的程序语言,使得程序猿们能愉快地编写复杂程度适中的程序.但是需求是在不断增长的 ...
- Unity - Photon PUN 本地与网络同步的逻辑分离 （一）
服务器大家可以使用Photon官网提供的,这样会变得很简单,直接搭建下就好.或者下载到本地开启本地端Photon服务器 (大家也可以使用和我一样方式有时间做了个winform 程序用来管理本地服务器开 ...
- Java使用quartz实现作业调度
在spring boot中使用quartz实现作业调度的功能,简单易用. 什么是Quartz? Quartz是Java领域最著名的.功能丰富的.开放源码的作业调度工具,几乎可以在所有的Java应用程序 ...
- Java中如何创建一个新的对象的/Creating Objects/
The Java Tutorials have been written for JDK 8. Examples and practices described in this page don't ...
- PHP获取时间戳和微秒数以及生成唯一ID
microtime函数 描述:返回当前Unix时间戳和微秒数 语法:mixed microtime( [ bool $get_as_float ] ) //直接输出 echo microtime(); ...
- LSTM(Long Short Term Memory)
长时依赖是这样的一个问题,当预测点与依赖的相关信息距离比较远的时候,就难以学到该相关信息.例如在句子”我出生在法国,……,我会说法语“中,若要预测末尾”法语“,我们需要用到上下文”法国“.理论上,递归 ...
- 二叉树/DFS总结
二叉搜索树(Binary Search Tree,又名排序二叉树,二叉查找树,通常简写为BST)定义如下: 空树或是具有下列性质的二叉树: ()若左子树不空,则左子树上所有节点值均小于或等于它的根节点 ...
- Oracle创建物化视图
1.物化视图语法 create materialized view [view_name] refresh [fast|complete|force] [ on [commit|demand] | s ...
- Solaris：你好奇的十件事
想想你周围的人,看看他们正在使用的操作系统.绝大部分人的电脑都在用主流操作系统:Windows,MacOS,甚至是Ubuntu.当说到Solaris,Unix和BSD的时候,其他人还以为你说鸟语呢.除 ...