DIV元素设置position:sticky后子元素hover事件不生效问题求助

Footer子元素hover失效的核心原因是.footer类设置了z-index: -1，该属性会让页脚元素层级低于页面普通流内的默认元素，上层的.works、.contact-pager等元素会直接覆盖在页脚上方，拦截所有鼠标交互事件，因此hover效果完全无法触发。你之前尝试的@media(hover:hover)和GSAP方案未触及层级问题，所以无法生效。

• 调整z-index层级
  将.footer的z-index: -1改为大于等于0的数值即可恢复交互。如果你需要实现滚动时其他内容盖在页脚上方的视差效果，可以给需要覆盖在页脚上方的元素单独设置更高的层级，同时给上层元素添加背景色避免透明透出页脚：

/* 修改后的footer样式 */
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1; /* 把原有-1修改为≥0的数值 */
  width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
}
/* 若需要其他内容覆盖在footer上方，给对应元素添加如下样式 */
.works, .contact-pager {
  position: relative;
  z-index: 2;
  background: #ffffff; /* 必须加背景色，否则会透明透出下层footer */
}

• 额外排查项
  如果修改z-index后仍有问题，检查.footer或其父元素是否设置了pointer-events: none，该属性会直接禁用所有鼠标事件，若存在则删除该属性，同时可以给.s-i主动添加交互权限配置：

.s-i {
  pointer-events: auto;
}

内容的提问来源于stack exchange，提问作者N SARATH CHAND