欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

如何让css hover 失效

程序员文章站 2022-04-02 12:33:21
...

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

如何让css 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 失效的详细内容,更多请关注其它相关文章!

相关标签: css hover