如何解决卡片悬停时图片遮挡下层按钮导致点击失效的问题

问题根因 #

• 图片设置opacity: 0仅为视觉隐藏，元素仍处于上层会接收所有指针事件，导致点击被拦截
• hover事件绑定在img元素上，图片透明后会丢失悬停状态，出现反复显隐的抖动问题
• 按钮的样式选择器书写错误，且未设置定位偏移与层级，位置不符合预期

具体修改代码 #

修正后的CSS #

.center {
  text-align: center;
}

img.rounded-corners {
  border-radius: 30px;
  background-color: rgba(29, 30, 40, 1);
}

/* 修正类选择器写法，多个类并列无空格，补充居中逻辑与层级 */
.btn.btn-primary {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* 可选：加过渡让按钮显示更自然 */
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.card {
  background-color: transparent;
  position: relative;
  height: 500px;
  width: 500px;
  margin: 0 auto;
}

.card img {
  position: absolute;
  left: 0;
  opacity: 1;
  transition: opacity 1s ease-in-out;
  z-index: 2;
}

/* hover绑定到父容器，避免悬停丢失，图片隐藏时禁用指针事件 */
.card:hover img {
  opacity: 0;
  pointer-events: none;
}
/* 卡片悬停时同步显示按钮 */
.card:hover .btn.btn-primary {
  opacity: 1;
}

/* 适配移动端：触摸卡片时触发效果 */
.card:active img, .card:focus-within img {
  opacity: 0;
  pointer-events: none;
}
.card:active .btn.btn-primary, .card:focus-within .btn.btn-primary {
  opacity: 1;
}

HTML代码无需修改，保持原有结构即可 #

效果说明 #

• PC端鼠标悬停卡片任意区域即可触发图片渐隐、按钮渐显，此时点击区域无图片拦截，可正常触发按钮点击事件
• 移动端触摸卡片即可触发显隐效果，不需要绑定图片点击事件，避免点击误触发问题

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