CSS hover效果在图片背景下失效，按钮悬停时边框不显示如何解决？

问题根因 #

你遇到的悬停边框不可见问题，核心是.shrink-border::after伪元素的z-index: -1设置，在没有堆叠上下文限制的情况下，这个伪元素层级会低于父容器的图片背景，直接被背景图遮挡。

解决方案 #

仅需要给.shrink-border按钮新增isolation: isolate属性，为按钮创建独立堆叠上下文，让内部伪元素的层级只在按钮范围内生效，不会穿透到父容器背景下方即可。

修改后的核心代码： #

.shrink-border {
  background-color: transparent;
  color: #1b1b20;
  /* 新增这一行即可解决问题 */
  isolation: isolate;
}

同时你提供的HTML代码中存在多余的</a>闭合标签，建议删除避免结构异常：

<!-- 删除多余的这行无效闭合标签 -->
<!-- </a> -->

修改后按钮的悬停金色边框就会正常显示在图片背景上方，原有收缩动画效果也不会受任何影响。

内容的提问来源于stack exchange，提问作者Daniel Armenta