最近碰到了一个设置h标签的hover失效问题，找了些资料，趁此机会做个总结

在 CSS 定义中，它们同时存在的时候,a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。,即visitied / link> hover > active **
**在 CSS 定义中，它们同时存在的时候,a:active 必须被置于 a:hover 之后，才是有效的。

类名写错了

设置了hover的元素被其他元素覆盖住了

自定义css覆盖优先级不够

关于这方面的资料，参考CSS样式覆盖规则

hover:{}内部定义样式有错误存在

hover和:和{}之间有空格存在或使用了中文冒号

不只是hover，其他的link、focus等失效也同样有可能是因为这个点。

在设置:hover前加了空格,致使只对后代有效

例如a :hover,该a标签本身不会有:hover的效果，而其后代元素才会有:hover的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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>

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

hover只会与子代元素元素及兄弟元素起作用

hover属性只作用于它的子代元素，并且自带设置属性（style、class、id）的子代元素不受hover的影响。

在做作业的过程中，会发现元素a会作用于自己不想要产生变化的元素，在这称为元素b，刚开始第一个想法就是将b与a分隔开，进而与a成为了兄弟元素，但有想要a:hover单独作用于b，这时发现代码a:hover .b{}失去了效果，通过查询资料了解到，当想要hover作用于兄弟元素时，代码会发生相应的变化，我们需要在b前加上+号，即a:hover +.b{}。但后面的过程又发现，这个方法并不是对所有的兄弟元素都适用，通过了解得知，hover作用的兄弟元素，仅仅只是对相邻的兄弟元素有用。

还是上个例子,把

1
2
3
.one :hover {
		background: #da56d0;
	}

改为

1
2
3
.one:hover .two {
		background: #da56d0;
	}

发现能达到我们想要的效果,改为

1
2
3
.two:hover +.three {
		background: #da56d0;
	}

也能达到效果（注意把”+”号去掉，就不能达到效果了）,而改为

1
2
3
.two:hover .four {
		background: #da56d0;
	}

不能达到我们的效果（无论带不带加号）

IE下:hover无效时

在页面中， 正确书写DOCTYPE，另外确保浏览器处于非兼容模式下

1
2
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
<html xmlns="http://www.w3.org/1999/xhtml">

参考文章：
关于CSS中hover失效的几个原因
css中关于hover失效问题总结
关于hover失效的问题
IE8下hover无效

最后更新： 2019年10月13日 22:27

原始链接： http://ldc5886.github.io/2019/07/20/CSS%20hover%E5%A4%B1%E6%95%88%E7%9A%84%E5%8E%9F%E5%9B%A0%E6%80%BB%E7%BB%93/

赏
× 请我吃糖~
打赏二维码