SVG嵌入HTML热点区域鼠标悬停显隐提示卡片实现问题咨询

纯CSS方案完全可行，你之前的代码不生效是三个核心问题 #

• 选择器逻辑错误：你写的a:hover + span相邻兄弟选择器，要求触发hover的a标签和span是直接平级相邻节点，但你的代码里a标签只包裹了热点路径，和存放提示的<foreignObject>是互相独立的平级节点，根本匹配不到，自然不会触发显隐。
• 提示位置错误：所有提示卡片的<foreignObject>坐标都固定写死为x="20" y="20"，就算成功显示，所有提示都会堆在SVG左上角，不会出现在对应热点旁边。
• 渲染兼容问题：你给全局所有div设置了text-align: center，会干扰SVG内部嵌入HTML的渲染；同时<foreignObject>缺少XHTML命名空间声明，部分浏览器会直接忽略内部的HTML内容不渲染。

纯CSS方案修复步骤 #

1. 调整CSS样式，删掉重复的.hide/.hide2/.hide3类和冗余的a标签样式，统一用类控制，避免全局样式污染：

/* 仅给地图容器设置居中，不要给全局div加居中样式 */
.mapdiv {
  text-align: center;
}
/* 默认隐藏所有提示卡片 */
.hotspot .tooltip-card {
  display: none;
  border: 5px double #b4b8bf;
  padding: 12px;
  background: #fff;
  font-size: 20px;
  color: #4287f5;
}
/* 鼠标悬停在热点区域时，显示同组内的提示卡片 */
.hotspot:hover .tooltip-card {
  display: block;
}
/* 给热点区域加交互反馈 */
.hotspot path {
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.hotspot:hover path {
  opacity: 0.6;
}

2. 调整SVG结构，把每个热点和对应的提示卡片放到同一个<g class="hotspot">组里，给<foreignObject>加上XHTML命名空间，同时把提示的坐标调整到对应热点附近：

<!-- 响应式SVG设置：宽度设为100%，删除固定height属性，保留viewBox即可自动适配容器缩放 -->
<svg
  version="1.1"
  id="svg366"
  width="100%"
  viewBox="0 0 3272.7273 2029.0909"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- 省略底图、命名视图等原有代码 -->
  <g inkscape:groupmode="layer" inkscape:label="Image" id="g372">
    <image width="3272.7273" height="2029.0909" preserveAspectRatio="none" xlink:href="maps/Comox12.jpg" id="image374" />
    
    <!-- 第一个热点组 -->
    <g class="hotspot">
      <a xlink:href="#">
        <path
          style="fill:#310000"
          d="m 853.64075,499.05151 c -152.34204,-2.62658 -152.34204,-2.62658 -152.34204,-2.62658 l 2.62658,168.10156 212.75354,31.51904 76.17102,-110.31665 z"
          id="path562" />
      </a>
      <!-- 调整x/y坐标到对应热点附近，加上xhtml命名空间 -->
      <foreignObject x="750" y="450" width="200" height="120" xmlns="http://www.w3.org/1999/xhtml">
        <span class="tooltip-card">First Card</span>
      </foreignObject>
    </g>

    <!-- 第二个热点组，结构和第一个完全一致，调整foreignObject坐标即可 -->
    <g class="hotspot">
      <a xlink:href="#">
        <path
          style="fill:#333"
          d="m 1452.5026,590.98206 -154.9687,186.48767 383.4817,84.05078 291.5512,7.87976 -112.9433,-309.93726 z"
          id="path6362" />
      </a>
      <foreignObject x="1400" y="550" width="200" height="120" xmlns="http://www.w3.org/1999/xhtml">
        <span class="tooltip-card">Second Card</span>
      </foreignObject>
    </g>

    <!-- 第三个热点组同理 -->
    <g class="hotspot">
      <a xlink:href="#">
        <path
          style="fill:#777"
          d="m 1329.053,1625.8573 57.7849,344.0829 643.5138,36.7722 -139.2091,-378.2285 z"
          id="path6364" />
      </a>
      <foreignObject x="1300" y="1580" width="200" height="120" xmlns="http://www.w3.org/1999/xhtml">
        <span class="tooltip-card">Third Card</span>
      </foreignObject>
    </g>
  </g>
</svg>

改完之后不需要任何JS，鼠标移到对应热点就会自动显示提示，移开自动隐藏。

JavaScript实现方案 #

如果只是实现悬停显隐的基础需求，纯CSS已经足够，不需要额外写JS。如果后续需要加提示跟随鼠标、点击锁定提示、动态加载内容这类更复杂的交互，可以用JS实现，下面是零依赖的极简样例，不需要复杂的JS基础，复制即可用：

1. 先在页面里加一个全局的提示容器，不用在SVG里写多个foreignObject：

<div id="svg-tooltip" style="display: none; position: fixed; padding: 12px; background: #fff; border: 5px double #b4b8bf; z-index: 999; pointer-events: none; color: #4287f5; font-size: 20px;"></div>

2. 给每个热点路径加data-tip属性存对应的提示内容，比如：

<path class="hotspot-path" data-tip="First Card" style="fill:#310000" d="/* 第一个热点路径 */" />
<path class="hotspot-path" data-tip="Second Card" style="fill:#333" d="/* 第二个热点路径 */" />
<path class="hotspot-path" data-tip="Third Card" style="fill:#777" d="/* 第三个热点路径 */" />

3. 在页面末尾加不到20行JS代码即可实现跟随鼠标的提示效果：

const tooltip = document.getElementById('svg-tooltip');
document.querySelectorAll('.hotspot-path').forEach(hotspot => {
  // 鼠标移入显示提示
  hotspot.addEventListener('mouseenter', e => {
    tooltip.textContent = e.target.dataset.tip;
    tooltip.style.display = 'block';
  })
  // 鼠标移动时提示跟随光标偏移
  hotspot.addEventListener('mousemove', e => {
    tooltip.style.left = `${e.clientX + 15}px`;
    tooltip.style.top = `${e.clientY + 15}px`;
  })
  // 鼠标移出隐藏提示
  hotspot.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
  })
})

这个方案不用手动计算每个提示的坐标，适配响应式SVG更方便。

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