咨询：鼠标悬停img标签时如何显示多个元素？CSS可行吗？

当然可以用纯CSS实现这个交互，但核心前提是你的p标签和overlay div要和img标签在DOM结构上能通过CSS选择器关联起来，比如同属一个父容器，或者是img的兄弟元素。下面分情况给你讲清楚：

纯CSS实现（优先推荐） #

如果你的HTML结构是类似这样的（img和目标元素在同一个父容器里）：

<div class="staff-pic-contain">
  <img class="staff-pic" src="your-staff-photo.jpg" alt="Staff Photo">
  <div class="overlay">员工信息浮层</div>
  <p>员工姓名</p>
  <p>职位：设计师</p>
</div>

那只需要在现有CSS基础上添加以下代码即可：

/* 默认状态下隐藏overlay和所有p标签 */
.staff-pic-contain .overlay,
.staff-pic-contain p {
  display: none;
}

/* 方案1：悬停整个容器时触发（体验更友好，鼠标移到容器内都有效） */
.staff-pic-contain:hover .overlay,
.staff-pic-contain:hover p {
  display: block;
}

/* 方案2：仅悬停img时触发（精准绑定img的悬停事件） */
.staff-pic:hover ~ .overlay,
.staff-pic:hover ~ p {
  display: block;
}

⚠️ 注意：方案2里的~是通用兄弟选择器，只能选择出现在img标签之后的兄弟元素。如果你的p或overlay在img前面，这个选择器就失效了，这时候要么调整元素顺序，要么用方案1。

什么时候需要用JavaScript？ #

如果你的p标签和overlay div分散在DOM树的不同位置（比如不在img的父容器里，甚至跨了好几个层级），那纯CSS的选择器就无法关联它们了，这时候就得用JS来监听鼠标事件：

// 获取目标img元素
const staffImg = document.querySelector('.staff-pic');
// 获取所有需要控制的p标签和overlay
const targetElements = document.querySelectorAll('p, .overlay');

// 鼠标悬停时显示
staffImg.addEventListener('mouseover', () => {
  targetElements.forEach(el => {
    el.style.display = 'block';
  });
});

// 鼠标离开时隐藏
staffImg.addEventListener('mouseout', () => {
  targetElements.forEach(el => {
    el.style.display = 'none';
  });
});

是否需要调整实现思路？ #

如果当前的HTML结构没法用CSS关联元素，又不想引入JS，那最合理的做法就是调整HTML结构——把需要显示的p和overlay放到img的父容器里，作为img的兄弟或子元素。这样不仅能用纯CSS实现，代码更简洁，性能也更好（CSS比JS的交互响应更快）。

比如调整后的结构可以更规整：

<div class="staff-pic-contain">
  <img class="staff-pic" src="your-staff-photo.jpg" alt="Staff Photo">
  <!-- 把所有需要显示的内容打包到一个容器里，方便统一控制 -->
  <div class="staff-info">
    <div class="overlay"></div>
    <p>张三</p>
    <p>UI设计师</p>
  </div>
</div>

对应的CSS也可以简化成控制.staff-info的显示隐藏，维护起来更方便。

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