移动端SVG对象hover交互效果失效问题求助

• 移动端为触摸交互逻辑，不存在桌面端的鼠标悬停（:hover）事件：移动端浏览器默认仅会在用户首次点击元素时短暂触发:hover状态，第二次点击才会触发点击/跳转逻辑，部分移动端浏览器甚至完全不响应非<a>标签的:hover状态。
• <object>标签嵌入的SVG属于独立文档上下文，在移动端会拦截父元素的触摸事件，导致父元素的交互状态无法被正常触发。
• 当前交互逻辑完全绑定:hover伪类，未做移动端触摸事件适配，因此在移动端完全失效。

1. 替换纯:hover依赖，增加类名控制的激活状态 #

保留原有:hover样式适配桌面端，新增.active类绑定和:hover完全一致的展开样式，通过JS监听触摸/点击事件切换类名，兼容移动端交互：

/* 为四个控制条的激活状态绑定和hover相同的样式 */
.circuit-map .circuit-controls#statsLeft:hover,
.circuit-map .circuit-controls#statsLeft.active,
.circuit-map .circuit-controls#statsRight:hover,
.circuit-map .circuit-controls#statsRight.active {
    width: 95.65%;
}
.circuit-map .circuit-controls#statsTop:hover,
.circuit-map .circuit-controls#statsTop.active,
.circuit-map .circuit-controls#statsBottom:hover,
.circuit-map .circuit-controls#statsBottom.active {
    height: 92.1%;
}

添加JS交互逻辑，处理点击展开/收起：

const controlEls = document.querySelectorAll('.circuit-controls');
const circuitMapEl = document.querySelector('.circuit-map');

// 可选择仅在触摸设备绑定点击逻辑，不影响桌面端hover体验
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
if (isTouchDevice) {
  controlEls.forEach(control => {
    control.addEventListener('click', (e) => {
      // 先收起其他已展开的面板
      controlEls.forEach(el => {
        if(el !== control) el.classList.remove('active');
      });
      // 切换当前面板的展开状态
      control.classList.toggle('active');
      e.stopPropagation();
    })
  })
  // 点击赛道图空白区域时收起所有面板
  circuitMapEl.addEventListener('click', () => {
    controlEls.forEach(el => el.classList.remove('active'));
  })
}

2. 修复<object>标签拦截触摸事件的问题 #

<object>嵌入的SVG会吞掉父元素的触摸信号，两种处理方案可选：

• 方案一：如果SVG内部没有独立交互需求，直接给object标签加CSS让事件透传：

.circuit-controls object {
  pointer-events: none;
}

• 方案二：如果SVG内部需要独立交互，替换<object>嵌入方式为直接内联SVG，或使用<img>标签加载SVG，避免独立文档上下文拦截事件。

原有桌面端hover交互逻辑完全保留，新增的点击触发逻辑仅在触摸设备生效，不会破坏现有桌面端体验；修改后清空移动端浏览器缓存即可测试效果。

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