Font Awesome图标hover局部失效问题排查与修复方案求助

问题 #

从Font Awesome官网获取的图标，仅在当前代码中hover效果失效，怀疑是<i>标签导致，但代码其他部分hover功能正常，需要复现问题并给出修复方案。

问题分析 #

hover失效和<i>标签完全无关，核心问题是你给.cont4设置了z-index: -1。这个值会让整个容器被压到页面最底层，甚至在默认的文档流元素下方，导致鼠标根本无法触发容器内元素的hover事件——你的鼠标实际是“点”在容器上方的空白文档流上，根本碰不到图标链接。

修复方案 #

只需要修改.cont4的z-index值，把负数改成正数或者直接移除这个属性即可，同时建议补充容器高度的单位，确保容器能正常显示：

修改后的CSS关键部分 #

.cont4 {
  position: relative;
  /* 移除z-index: -1，或者改成正数比如 z-index: 1 */
  width: 100%;
  height: 100vh; /* 用vh单位确保容器占满视口高度，否则可能看不到内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, rgb(243, 53, 205), rgb(255, 255, 255));
}

验证后，hover效果会正常触发，图标链接的颜色会变为黑色，也可以启用注释里的transform: translateY(-20px)动画效果。

内容的提问来源于stack exchange，提问作者Abhiskek Kumar