CSS中hover失效的原因

发布时间:2020-11-18 09:58:56 作者:小新
来源:亿速云 阅读:328

了解CSS中hover失效的原因?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

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

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>  
<h2>测试</h2>  
<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失效的原因大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. css中hover的使用
  2. css中hover的用法是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css hover

上一篇:jquery怎样处理ajax缓存问题

下一篇:怎么用jquery判断数据是否加载完成

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》