如何实现鼠标悬停SVG元素时控制外部HTML段落的显示隐藏

问题根因 #

你当前的写法存在两个核心问题：

• 通过<embed>加载的外部SVG是独立的DOM文档，和父HTML页面的DOM完全隔离，CSS无法跨两个文档做元素选择
• 原有CSS选择器.redcircle:hover .item逻辑错误，该写法表示选择.redcircle的后代类名为item的元素，但你要控制的item是和SVG平级的兄弟元素，不存在父子关系

方案1：直接内联SVG（无需JS，最简便） #

把外部SVG的内容直接复制到HTML文件里，不要用embed加载，修改后的代码如下：

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css" type="text/css"/>
</head>
<body>
  <svg height="300" width="300">
    <circle class="redcircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    <circle cx="200" cy="200" r="40" stroke="green" stroke-width="3" fill="purple" />
  </svg>
  <p class="item"> this is a hidden text, should only appear when hover over red circle</p> 
</body>
</html>

CSS代码（修改选择器） #

.item {
   display:none;
}
/* 兄弟选择器，匹配.redcircle hover后同级的.item元素 */
.redcircle:hover ~ .item{
   display:block;
}

方案2：保留embed加载外部SVG（需要JS实现） #

如果必须要单独维护SVG文件，就通过JS跨文档监听事件实现，修改代码如下：

HTML代码 #

<!DOCTYPE html>
<html>
<body>
  <embed id="svgEmbed" src="graphic.svg" />
  <p class="item"> this is a hidden text, should only appear when hover over red circle</p> 
  <script>
    const svgEmbed = document.getElementById('svgEmbed');
    const targetP = document.querySelector('.item');
    // 等SVG加载完成后绑定事件
    svgEmbed.addEventListener('load', () => {
      const svgDoc = svgEmbed.contentDocument;
      const redCircle = svgDoc.querySelector('.redcircle');
      // 鼠标移入显示
      redCircle.addEventListener('mouseenter', () => {
        targetP.style.display = 'block';
      });
      // 鼠标移出隐藏
      redCircle.addEventListener('mouseleave', () => {
        targetP.style.display = 'none';
      });
    });
  </script>
</body>
</html>

CSS代码 #

.item {
   display:none;
}

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