如何实现鼠标悬停/触摸图片时显示信息窗口？

原代码仅依赖CSS :hover 实现悬停显示，在移动端触摸场景完全失效，桌面端点击也无法保持显示。下面是兼容Web和移动应用的解决方案：

修改后的完整代码 #

HTML #

<div class="container">
  <img src="https://m.media-amazon.com/images/I/81YFrKSH40L._AC_UF894,1000_QL80_.jpg" alt="示例图片" width="114" height="114">
  <div class="info-box">
    <h2>信息标题</h2>
    <p>这是图片的详细描述信息。</p>
  </div>
</div>

CSS #

.container {
  position: relative;
  display: inline-block;
  cursor: pointer; /* 给桌面端添加点击光标提示 */
}

.info-box {
  visibility: hidden;
  width: 200px;
  background-color: #f9f9f9;
  color: #333;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 用类控制显示，替代hover */
.container.active .info-box {
  visibility: visible;
}

JavaScript #

// 获取容器元素
const container = document.querySelector('.container');

// 监听点击和触摸事件（触摸事件优先，避免移动端双击缩放）
container.addEventListener('touchstart', toggleInfoBox, { passive: true });
container.addEventListener('click', toggleInfoBox);

// 切换信息框显示状态
function toggleInfoBox(e) {
  e.stopPropagation(); // 阻止事件冒泡到文档
  container.classList.toggle('active');
}

// 点击页面其他区域关闭信息框
document.addEventListener('click', () => {
  container.classList.remove('active');
});

关键修改说明 #

• 移除CSS中依赖:hover的触发逻辑，改用.active类控制显示，同时支持点击和触摸操作
• 添加cursor: pointer给桌面端用户明确的点击提示
• 用JS监听touchstart（移动端）和click（桌面端）事件，切换容器的active类
• 增加点击外部关闭信息框的逻辑，提升交互体验

内容的提问来源于stack exchange，提问作者Lúcio Benfica