如何在移动端实现图片热点hover效果的替代方案？

先修复原CSS的语法错误 #

你当前的CSS里，:hover的选择器写法有误，导致.hotspot::after会一直处于显示状态，正确的写法应该是把::after也纳入hover状态的触发范围：

.hotspot::before{
  content:attr(text);
  width: max-content;
  position: absolute;
  background-color: rgb(189, 189, 189);
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0, 0, 0);
  width: 12em;
  height:3em;
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
  padding: 8px 20px;
  font-size: 18px;
  border-radius: 3px;
  display: none;
}

.hotspot::after{
  content: "";
  border-color: transparent transparent black;
  border-width: 0px 8px 6px;
  border-style: solid;
  position: absolute;
  top:24px;
  left:50%;
  transform: translateX(-50%);
  display: none;
}

/* 修正后的hover选择器 */
.hotspot:hover::before,
.hotspot:hover::after{
  display: block;
}

移动端替代hover的几种可行方案 #

方案1：修复:active的触发问题

移动端的:active状态默认触发后会快速消失，需要给页面添加触摸事件监听来维持状态：

• 第一步：在HTML的<body>标签中添加ontouchstart=""，让浏览器识别触摸交互：

<body ontouchstart="">
  <!-- 页面内容 -->
</body>

• 第二步：修改CSS，添加:active状态的触发规则：

.hotspot:hover::before,
.hotspot:hover::after,
.hotspot:active::before,
.hotspot:active::after{
  display: block;
}

该方案逻辑和桌面端hover最接近，但移动端用户可能需要长按触发，体验一般。

方案2：点击切换提示（推荐，符合移动端交互习惯）

通过点击事件切换热点的active类，实现点击显示/隐藏提示，同时支持点击页面其他区域关闭提示：

• 第一步：修改CSS，添加active类的触发规则：

.hotspot:hover::before,
.hotspot:hover::after,
.hotspot.active::before,
.hotspot.active::after{
  display: block;
}

• 第二步：添加JS处理点击逻辑：

// 给每个热点绑定点击事件
document.querySelectorAll('.hotspot').forEach(hotspot => {
  hotspot.addEventListener('click', function(e) {
    // 关闭其他热点的提示
    document.querySelectorAll('.hotspot.active').forEach(el => el.classList.remove('active'));
    // 切换当前热点的显示状态
    this.classList.toggle('active');
    e.stopPropagation();
  });
});

// 点击页面其他区域关闭所有提示
document.addEventListener('click', function() {
  document.querySelectorAll('.hotspot.active').forEach(el => el.classList.remove('active'));
});

该方案贴合移动端用户操作习惯，避免了长按的繁琐。

方案3：使用:focus-within（适用于可聚焦元素）

如果.hotspot是<a>、<button>这类天然可聚焦元素，或给<div>添加了tabindex属性，可通过:focus-within实现点击后保持提示显示，失去焦点后隐藏：

• 第一步：给非可聚焦热点元素添加tabindex：

<div class="hotspot" tabindex="0" text="提示内容"></div>

• 第二步：修改CSS，添加:focus-within规则：

.hotspot:hover::before,
.hotspot:hover::after,
.hotspot:focus-within::before,
.hotspot:focus-within::after{
  display: block;
}

该方案无需额外JS，适合简单场景，但用户需点击其他区域才能关闭提示。

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