两个SVG心形悬停效果在独立代码中正常，集成卡片后失效（HTML/CSS）

问题出在z-index: -1的SVG元素会脱离.card__heart的层级上下文，跑到卡片父元素的后方，导致hover事件触发时，该元素不在.card__heart的有效作用范围内，所以opacity变化无法生效。

修复步骤：

1. 给.card__heart设置相对定位，让内部元素的z-index基于这个容器：

.card__heart {
  position: relative;
  width: 24px; /* 设置和SVG一致的宽高，确保hover区域正确 */
  height: 24px;
}

2. 调整两个SVG的定位和z-index，确保它们都在.card__heart的层级范围内：

.svg__heart--outline,
.svg__heart--filled {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.svg__heart--outline {
  z-index: 1; /* 让轮廓心形在上方 */
}

.svg__heart--filled {
  z-index: 0; /* 填充心形在轮廓下方，但仍在.card__heart容器内 */
  opacity: 0;
  transition: opacity 0.3s ease; /* 可选：添加过渡动画让效果更平滑 */
}

3. 保留原有的hover样式即可：

.card__heart:hover .svg__heart--filled {
  opacity: 1;
}

这样修改后，两个心形SVG会在.card__heart容器内正确叠加，hover时填充心形的透明度变化就能正常触发了。

内容的提问来源于stack exchange，提问作者Mickael-Klein