hover失效的几种原因与z-index失效原因

hover失效的原因

今天检查自己写的小米官网，发现轮播图上的左右按钮的不知什么时候hover竟然失效了。然后检查了类名，样式，没发现问题。最后查阅了资料，发现常见的有以下原因

1. :hover前加了空格或使用了中文冒号
2. active，visited，hover，link之间的关系
   active < hover < visitied / link其意思就是active需定义在hover之后才能起作用，而hover需定义在visited和link之后才会起作用。当然，前提是它们同时存在的时候。
3. 就是我之前总结过的hover只对子元素和兄弟元素起作用，并且改变兄弟元素状态时会用到兄弟选择器。
4. 还有最后一个原因统称为低级错误。
   当然了我的就是低级错误😜
   之前想让一个下拉框下拉的时候，显示在轮播图的上方，就把轮播图部分的层级设成了index:-1;结果hover找不到轮播图上的按钮元素，就肯定不能改变它的状态了。这个错误确实挺低级的。

z-index失效原因

1、父标签 position属性为relative；

2、问题标签无position属性（不包括static）；

3、问题标签含有浮动(float)属性。

解决办法：
1、position:relative改为position:absolute；

2、浮动元素添加position属性（如relative，absolute等）；

3、去除浮动。