在设置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失效?失效原因介绍的详细内容,更多请关注0133技术站其它相关文章!