提到 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样式失效的解决方法的更多相关文章

  1. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  2. 移动端ios下H5的:active样式失效的解决方法

    在body上绑定一个touchstart事件,空函数就行: document.body.addEventListener('touchstart', function(){}, false) 或者在b ...

  3. IE7的overflow失效的解决方法

    IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...

  4. margin-top失效的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...

  5. ode.js 版本控制 nvm 和 n 使用 及 nvm 重启终端失效的解决方法

    今天的话题包括2个部分 node.js 下使用 nvm 或者 n 来进行版本控制 nvm 安装node.js 版本后,重启终端 node , npm 环境变量失效 第一部分 用什么来管理 node.j ...

  6. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  7. "字体arial不支持样式regular"的解决方法

    软件报错,提示“字体arial不支持样式regular”的提示,这是由于字体arial缺失导致的, “字体arial不支持样式regular”的解决方法如下: 方法/步骤 1.用户需要先下载arial ...

  8. IE8下部分方法失效的解决方法

    1.IE8下String的Trim()方法失效的解决方法 用jquery的trim()方法,$.trim(str)就可以了: 例:_id.trim() !='' 改为  $.trim(_id) != ...

  9. IIS上发布站点后URL重写失效的解决方法

    在发布网站时URL重写有可能会失效,如果失效的话就需要您设置一下IIS:1.Windows XP系统或Windows 2003系统等使用以下方法:>打开IIS,主目录-〉配置-〉映射-〉在窗体左 ...

随机推荐

  1. Linux驱动之平台设备驱动模型简析（驱动分离分层概念的建立）

    Linux设备模型的目的:为内核建立一个统一的设备模型,从而有一个对系统结构的一般性抽象描述.换句话说,Linux设备模型提取了设备操作的共同属性,进行抽象,并将这部分共同的属性在内核中实现,而为需要 ...

  2. .Net 配置的简陋解决方案

    公司是做CS产品的, 最近分配给我一个活, 要求:     1. 公司程序启动时, 检测是否有配置文件, 没有的话则按默认值创建一个     2. 配置文件要加密, 不能让客户随便看到里面的参数   ...

  3. touch.js 手机端的操作手势

    使用原生的touchstart总是单击.长按有冒泡冲突事件,发现百度在几年开源的touch.js库,放在现在来解决手机端的操作手势,仍然很好用.

  4. common skill

    lunix watch and kill progress 1.  ps -ef 2. kill -9 pid

  5. [Presto]Presto章1 Presto 咋用

    Presto 的平均查询性能是 Hive 的 10 倍! 由于 Presto 的数据源具有完全解耦.高性能,以及对 ANSI SQL 的支持等特性,使得 Presto 在 ETL.实时数据计算. Ad ...

  6. Springboot & Mybatis 构建restful 服务五

    Springboot & Mybatis 构建restful 服务五 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务四 2 restful ...

  7. python 环境变量设置PYTHONPATH

    PYTHONPATH是Python搜索路径,默认我们import的模块都会从PYTHONPATH里面寻找. 打印PYTHONPATH: import os print sys.path >['' ...

  8. sublime text2 安装及使用教程

    1.下载安装包地址:https://www.sublimetext.com/2 2.安装,一直点下一步就好,将下列选项打钩,这样文件右键就可以直接用sublime text2打开 3.新建一个html ...

  9. django中views中方法的request参数

    知其然亦要知其所以然 views每个方法的参数都是request,那么问题来了,request为何物? 首先,几乎每个方法都是取数据(无论是从数据库,还是从第三方接口),然后进行一定的处理,之后传给前 ...

  10. Windows端口开放

    1.查看:cmd->netstat -na: 2.测试:cmd->telnet [ip] [port]: 3.开启:防火墙新建规则.