当我们在使用css中hover时，偶尔会遇到无效的情况，这个真是让人很焦急。那么到底是什么原因导致失效的呢？本篇文章就给大家总结一下css中hover失效的原因。

css中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;}
css中hover的用法测试

登录后复制

无效原因总结：

一、上述代码测试时发现鼠标经过class为one的时候背景不变，而经过one里面的其他div背景颜色发生变化，说明了:hover前加空格，本身不会有:hover的效果，而后代元素会有:hover的效果。

二、只有后代元素和兄弟元素（紧接在元素后的兄弟元素）才有效果，其他的:hover会失效

立即学习“前端免费学习笔记（深入）”；

三、类名错误；

四、:hover 被置于 :link 和 :visited 之前也是无效的;

注：

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

以上就是为什么有时候使用css中hover属性会没有反应？（示例）的详细内容，更多请关注【创想鸟】其它相关文章！