提到 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. 自适应Web主页

    HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. python基础 (函数名,闭包,和迭代器)

    1.函数名作用 函数名本质上就是函数的内存地址或对象. 1.可以被引用 2.可以被当作容器类型的元素 3.可以当作函数的参数和返回值 4.如果记不住的话,那就记住一句话,就当普通变量用 2.闭包 什么 ...

  3. 使用iconfont图标

    iconfont.cn基本使用 登录iconfont.cn网站,直接使用github账号即可登录 输入关键字搜索需要的图标,然后在需要的图标上点击'添加入库' 点击网站右上角的购物车图标,查看当前已入 ...

  4. Numpy安装

    Python官网上的发行版是不包含Numpy模块的. 1.使用已有的发起行版本 对于许多用户,尤其是在Windows上,最简单的方法就是下载以下的Python发行版,他们包涵了所有的关键包(包括Num ...

  5. MySQL学习入门安装和启动及常见问题解决方法（一）

    1.下载MySQL 官网地址:https://www.mysql.com/downloads/ 2.个人学习使用,只有下面这个是免费的 3.下载之后解压到目录中,并加入环境变量,如下 创建MYSQL_ ...

  6. Redis学习笔记：与SpringBoot结合使用

    首先需要在pom文件中导入相应的Redis依赖(版本可以会变化,下面坐标也可能会变化) <dependency> <groupId>org.springframework.bo ...

  7. jquery基础知识随笔

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  8. sessionStorage和localStorage的使用方法

    1.sessionStorage sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空 JSON.pars ...

  9. reactjs 学习笔记

    1.安装 npm install -g create-react-app create-react-app my-app cd my-app npm start

  10. Java：ConcurrentLinkedQueue的实现原理分析

    本文是作者原创,首发于InfoQ:http://www.infoq.com/cn/articles/ConcurrentLinkedQueue 1.    引言 在并发编程中我们有时候需要使用线程安全 ...