如何会让css hover失效?失效原因介绍

如何设置会让css hover失效?失效原因是什么?怎么解决?下面本篇文章给大家简单介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

1、:hover 被置于 :link 和 :visited 之前了;或被置于:active之后了

  • :link:选择未被访问的链接,并设置其样式;即:定义正常(未被访问)链接的样式。

  • :hover:选择鼠标指针浮动在其上的元素,并设置其样式;即:定义鼠标悬浮在链接上时的样式。

  • :active:选择活动链接,并设置其样式;即:定义鼠标点击链接时的样式。

  • :visited:选择已访问的链接,并设置其样式;即:定义已访问过链接的样式。

没有规矩不成方圆,css 伪类设置链接样式也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。

总结:

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

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

2、在设置: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的效果。

3、类名写错了。

4、样式被覆盖了。

更多web前端知识,请查阅 HTML中文网 !!

以上就是如何会让css hover失效?失效原因介绍的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏