html中hover无法触发,CSS hover失效的原因总结

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

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

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

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

:hover 被置于 :link 和 :visited 之前

类名写错了

设置了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

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

}

测试

鼠标经过的时候，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-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

× 请我吃糖~