如何实现鼠标悬停时图片展开至全屏？

嗨，看起来你已经有了点击展开的基础逻辑，现在要改成悬停触发其实超简单，我给你一步步拆解：

核心思路就是把原来的click事件换成鼠标进入/离开的事件，配合CSS类切换来实现平滑的展开/收起动画，这样比直接用JS硬改样式优雅多了，维护起来也方便。

第一步：替换事件监听（从Click到Hover触发） #

你原来的代码里用了card.addEventListener('click', ...)，现在把它换成mouseenter（鼠标摸进卡片时触发展开）和mouseleave（鼠标挪走时触发收起）两个事件就行：

// 先选中所有卡片元素
const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  // 鼠标进入卡片，添加展开类
  card.addEventListener('mouseenter', () => {
    card.classList.add('expanded');
    // 如果要同时淡出背景，给背景容器加个类就行，比如document.body.classList.add('bg-faded')
  });

  // 鼠标离开卡片，移除展开类
  card.addEventListener('mouseleave', () => {
    card.classList.remove('expanded');
    // 把背景透明度改回去
    // document.body.classList.remove('bg-faded')
  });
});

第二步：用CSS实现展开/收起的视觉效果 #

重点是给卡片写好普通状态和展开状态的样式，记得加transition让动画平滑过渡，别太生硬：

/* 网格布局下的普通卡片样式 */
.card {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  /* 添加入场退场的过渡动画 */
  transition: all 0.3s ease;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

/* 展开全屏的状态样式 */
.card.expanded {
  position: fixed; /* 脱离网格布局，不影响其他卡片位置 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; /* 确保卡片在最上层，不会被别的元素挡住 */
  border-radius: 0; /* 去掉圆角，铺满整个屏幕 */
}

.card.expanded img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 也可以用cover，看你想要图片是完整显示还是铺满屏幕 */
}

/* 背景淡出的样式（按需添加） */
body.bg-faded {
  background-color: rgba(0, 0, 0, 0.7); /* 半透明黑背景，突出展开的图片 */
  transition: background-color 0.3s ease;
}

第三步：一些实用的小细节 #

• 如果卡片里还有标题、描述这类额外内容，想在展开时隐藏的话，加个样式就行：.card.expanded .card-content { display: none; }
• 怕鼠标不小心移出就收起？可以加个小延迟，给用户留个缓冲时间，记得要清除定时器避免冲突：

  cards.forEach(card => {
    let timeoutId;
    card.addEventListener('mouseenter', () => {
      clearTimeout(timeoutId); // 清除之前的延迟，防止误触发收起
      card.classList.add('expanded');
      // document.body.classList.add('bg-faded')
    });
  
    card.addEventListener('mouseleave', () => {
      timeoutId = setTimeout(() => {
        card.classList.remove('expanded');
        // document.body.classList.remove('bg-faded')
      }, 200); // 200毫秒延迟，足够用户调整鼠标位置
    });
  });
  

• 因为我们用了position: fixed，展开的卡片会脱离原来的网格布局，所以完全不用担心会挤变形其他卡片的位置～

这样改完之后，你的卡片就能在鼠标悬停时平滑展开全屏，离开时自动收起，背景也能跟着淡出，完美贴合你的需求！

备注：内容来源于stack exchange，提问作者Mark Wani