• 技术文章 >web前端 >前端问答

    如何让css hover 失效

    藏色散人藏色散人2020-11-17 10:58:47原创49

    让css hover失效的原因:1、在CSS定义中,“a:hover”没有被置于“a:link”和“a:visited”之后;2、在CSS定义中,“a:active”没有被置于“a:hover”之后。

    推荐:《css视频教程

    CSS中hover失效的几个原因:

    在设置CSS的hover时,有时会发现hover不起作用,总结一下原因:

    提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

    提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

    1.在设置:hover前加空格:

    比如

    <style type="text/css">  
        .one {  
            margin: 0 auto;  
            width: 400px;  
            height: 300px;  
            background: #ced05d;  
        }  
        .two {  
            margin: 0 auto;  
            width: 100px;  
            height: 100px;  
            background: #5a5aea;  
        }  
        .three {  
            margin: 0 auto;  
            width: 200px;  
            height: 100px;  
            background: #4b9c49;  
        }  
        .four {  
            margin: 0 auto;  
            width: 300px;  
            height: 100px;  
            background: #7b4141;  
        }  
        .one :hover {  
            background: #da56d0;  
        }  
    </style>  
    <body>  
    <h1>测试</h1>  
    <div class="one">  
        <div class="two">  
          
        </div>  
        <div class="three">  
              
        </div>  
        <div class="four">  
              
        </div>  
    </div>  
    </body>

    你发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,

    说明:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。

    2.当鼠标经过时,让其他元素改变样式:

    这时候你会发现,只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效

    还是上个例子

    .one :hover {  
            background: #da56d0;  
        }

    改为

    .one:hover .two {  
            background: #da56d0;  
        }

    发现能达到我们想要的效果

    改为

    .two:hover +.three {  
            background: #da56d0;  
        }

    也能达到效果(注意把"+"号去掉,就不能达到效果了)

    而改为

    .two:hover .four {  
            background: #da56d0;  
        }

    不能达到我们的效果(无论带不带加号)

    3.类名写错了;

    4.:hover 被置于 :link 和 :visited 之前了;

    5.你看错了;

    等等……

    以上就是如何让css hover 失效的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css hover
    上一篇:css网页乱码怎么办 下一篇:VUWE是什么意思?
    第14期线上培训班

    相关文章推荐

    • 如何使用jQuery中hover方法和toggle方法• 实例示范CSS中伪类选择器hover的使用方法• css中的hover怎么用• css hover的用法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网