网站项目卡片hover时图片不显示问题求助

核心问题梳理 #

你的场景是Grid布局的项目卡片，Hover时需要切换标题/说明、显示右侧缩略图，目前标题切换正常，但缩略图无法通过JS控制显隐，大概率是元素选择错误、CSS优先级冲突、JS事件绑定时机不对这三类问题导致，下面给出标准化的代码重构和排查步骤：

一、重构整洁的基础代码结构 #

先把杂乱的代码梳理成模块化结构，避免层级混乱：

HTML结构 #

<div class="projects-grid">
  <div class="project-card">
    <div class="card-text">
      <h3 class="project-title">项目A</h3>
      <p class="project-desc">这是项目A的详细说明，Hover时替换标题显示</p>
    </div>
    <div class="project-thumbnail">
      <img src="project-a.jpg" alt="项目A缩略图">
    </div>
  </div>
  <!-- 重复添加其他项目卡片 -->
</div>

CSS基础设置 #

/* Grid布局容器 */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

/* 卡片基础样式 */
.project-card {
  position: relative;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 1.8rem;
  overflow: hidden; /* 防止缩略图溢出卡片 */
  transition: all 0.3s ease;
}

/* 默认隐藏说明和缩略图 */
.project-desc, .project-thumbnail {
  display: none;
}

/* 缩略图定位 */
.project-thumbnail {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
}

.project-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

二、JS逻辑修复（或用CSS替代更稳定） #

方案1：JS控制显隐（适合需要额外交互的场景） #

确保JS在DOM加载完成后执行，且选择器完全匹配：

document.addEventListener('DOMContentLoaded', () => {
  const cards = document.querySelectorAll('.project-card');
  
  cards.forEach(card => {
    const title = card.querySelector('.project-title');
    const desc = card.querySelector('.project-desc');
    const thumbnail = card.querySelector('.project-thumbnail');
    
    // 鼠标进入
    card.addEventListener('mouseenter', () => {
      title.style.display = 'none';
      desc.style.display = 'block';
      thumbnail.style.display = 'block';
    });
    
    // 鼠标离开
    card.addEventListener('mouseleave', () => {
      title.style.display = 'block';
      desc.style.display = 'none';
      thumbnail.style.display = 'none';
    });
  });
});

方案2：用CSS伪类实现（更稳定，无JS依赖） #

如果不需要额外JS交互，直接用CSS hover伪类就能实现需求，完全避免JS绑定问题：

.project-card:hover .project-title {
  display: none;
}

.project-card:hover .project-desc,
.project-card:hover .project-thumbnail {
  display: block;
}

三、常见排查点 #

1. 选择器校验：检查JS/CSS中的类名和HTML完全一致，比如有没有拼写错误（如project-thumnail少写字母）、层级错误（如缩略图不在卡片容器内）
2. CSS优先级排查：如果缩略图的display属性被其他样式覆盖（比如内联样式、ID选择器），可以临时用display: block !important测试，或者提升选择器权重（比如.project-card .project-thumbnail比单独.project-thumbnail权重更高）
3. DOM加载时机：如果JS代码放在<head>标签里，必须用DOMContentLoaded包裹，否则DOM元素未渲染就会获取不到
4. 卡片overflow设置：确保卡片设置了overflow: hidden，否则缩略图可能溢出到卡片外，造成“没显示”的视觉错觉

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