网页链接跳转失效及按钮hover效果异常求助

核心问题根源 #

.card类设置了z-index: -100，这会将整个卡片容器置于页面所有元素底层，导致卡片内的链接、按钮被上层元素遮挡，无法触发点击或hover事件。

具体修复步骤 #

1. 修复z-index遮挡问题 #

修改.card的CSS，移除错误的层级设置：

.card {
  width: 225px;
  min-height: 225px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  position: relative;
  transition: 0.2s;
  color: #ffff;
  /* 移除 z-index: -100; */
}

2. 修正CSS语法错误 #

.card_img内的过渡属性存在语法错误，删除多余的点：

.card_img {
  width: 225px;
  min-height: 225px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  position: relative;
  transition: 0.2s; /* 修正为0.2s，移除多余的点 */
}

3. 清理HTML冗余属性 #

YouTube链接重复定义了target="_blank"，删除其中一个：

<a href="https://www.youtube.com/watch?v=_JOHMDCN3-E&ab_channel=Marakhonov" class="card_title" target="_blank">Маленьке гарненьке негритятко</a>

4. 可选：合并重复CSS样式 #

.container类被重复定义两次，合并为一份：

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

修复后效果 #

• 图片链接、YouTube链接均可正常点击跳转
• 按钮hover的背景色与文字颜色变化效果正常触发
• 卡片hover的阴影效果正常显示

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