HTML 5 基础之 hover 疑难杂症

2016-11-28 本文已影响146人我是奋斗哥

之前在做网页的过程( 纯 HTML + CSS )中遇到过这么一个问题：当父级在使用了定位的情况下，如何实现父级能够覆盖通过hover显示的子级的部分区域？(情况如图所示)

Image.png

如图所示的情况，是需要通过父级的白色背景来覆盖子级的边框以实现图中的效果

遇到这种情况，相信大家的第一反应都一样，那就是给父级设置 z-index 使得父级的 z-index 大于子级的 z-index。

然而事实证明这样的方法是行不通的，因为父级和子级同时都设置了定位，那么在无论给父级设置怎样的 z-index 都不可能大于子级的 z-index，因为子级始终是基于父级之上的。

那么给子级设置负数 z-index 呢？

我不得不说在给子级设置一个比较大的负数之后的确有效果，这样做使得原本一直是子级覆盖父级的情况发生改变，但是并不能扭转局面，而是出现一种父级和子级貌似平级但是都无法相互覆盖，内容也不发生拥挤，边框可以叠压在父级内容之上，但是子级白色背景却无法覆盖父级的情况。事实证明这种方法也行不通。

那么给父级取消定位不就好了？

确实，这样的话问题就不存在了。但是，图中情况子级必须用到绝对定位，而使用绝对定位则必须给父级设置定位，那么在这种大前提下，是不可能的。

那如何才能解决这一疑难杂症呢？

我们首先来分析一下图中情况

图中需要实现的是在划动父级的过程中出现子级，而由于特殊边框这一情况我们需要使得父级遮盖一部分子级边框方能达到图中所示效果。

1.对于实现划动父级的过程中出现子级

方法有二
1.通过父级 hover 子级的方式实现
2.通过兄弟关系 hover 实现（只能实现上一个兄弟元素 hover 下一个兄弟元素，无法实现后面的 hover 前面的兄弟元素）
既然第一种方法无法达到我们想要的结果，那么自然而然应该试试第二种方法

2.兄弟关系 hover （只能实现上一个兄弟元素 hover 下一个兄弟元素，无法实现后面的 hover 前面的兄弟元素）

通过兄弟关系 hover 确实能够达到想要的结果，因为没有了父子级的关系，那么兄弟之间的 z-index 相对独立，只要其中任意一个比另外一个要高，那么就能覆盖低的那一个。效果是达到了，但是通过 hover 出现的后一级兄弟元素无法通过鼠标选中和点击了，换句话说，一旦鼠标离开前一级兄弟元素的范围，通过 hover 出现的后一级兄弟就会消失。（梦想看得见了，却摸不着了。）

3.如何解决“摸不着”的问题呢？

由于 hover 属性的特点，只要鼠标在被 hover 元素的范围内，那么通过 hover 出现的元素就不会消失，相反若是通过 hover 出现的元素在被 hover 元素的范围内，那么理所应当便可以被点击和选中了。解决方法只需在给这两个兄弟元素套一个父级，被 hover 的元素若是父级，那么子级自然就在 hover区域内，在hover区域内操作鼠标通过 hover 出现的子元素自然就不会消失了。

以上纯属个人学习总结，如有疏漏或者不足之处还望指正，谢谢！