hover样式失效的解决方法

Posted tu-0718

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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样式失效的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

关于样式选择器:hover出现忽闪现象

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

a:hover伪类在ios移动端浏览器内点击无效的解决方法

IE下 CSS hover iframe失效

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

uniapp 开发H5打包微信小程序样式失效的解决之道