行内堆叠卡片样式异常求助：灰色overlay不显示、未hover即放大

一、卡片默认放大的问题 #

大概率是复制CSS时误把hover状态的放大样式写到了卡片的基础样式里。正常逻辑是卡片默认transform: scale(1)，hover时才触发scale(1.05)，如果把scale(1.05)直接写在.card的默认样式中，就会导致页面加载时卡片直接放大。

检查并修正CSS：

/* 错误写法：默认放大 */
.card {
  transform: scale(1.05);
  transition: transform 0.3s;
}

/* 正确写法：仅hover时放大 */
.card {
  transform: scale(1);
  transition: transform 0.3s;
}
.card:hover {
  transform: scale(1.05);
}

二、灰色overlay不显示的问题 #

主要是以下三个原因：

• 类名遗漏/不匹配：新卡片的overlay元素没添加原卡片对应的类（比如card-overlay），导致CSS样式无法生效
• 层级被覆盖：overlay的z-index设置过低，被卡片内的图片、文字等元素遮挡。给overlay设置z-index: 1，卡片内容设置z-index: 2即可
• hover触发逻辑失效：CSS选择器.card:hover .card-overlay未命中新卡片，可能是新卡片的HTML嵌套层级和原卡片不一致，或是类名修改后选择器未同步更新

参考正确的overlay样式示例：

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}
.card:hover .card-overlay {
  opacity: 1;
}

确保新卡片的overlay元素带有card-overlay类，且是.card的直接子元素。

三、额外核对点 #

• 新卡片的HTML结构是否和原卡片完全一致？比如原卡片是<div class="card"><div class="card-overlay"></div>...</div>，避免嵌套层级错误
• 是否有后续编写的CSS覆盖了原有hover样式？比如重复定义.card的transform属性，冲掉了hover效果

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