html中hover无法触发,如何会让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前加空格：

比如

.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;

}

测试

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

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

3、类名写错了。

4、样式被覆盖了。

更多web前端知识，请查阅 HTML中文网 ！！