将鼠标悬停在 SVG 路径上时如何使 div 出现？答案

【问题标题】：How can I make a div appear when hovering over a SVG path?将鼠标悬停在 SVG 路径上时如何使 div 出现？
【发布时间】：2017-10-31 17:33:16
【问题描述】：

我正在处理这个 SVG 图像，jsfiddle

 <div id='one'>
  items that should appear when hovering over 01(red circle) on the svg image
</div>

<div id='two'>
  items that should appear when hovering over 02(green circle) on the svg image
</div>
<div id='three'>
  items that should appear when hovering over 03(purple circle) on the svg image
</div>

我需要在将鼠标悬停在相关 SVG 圆圈上时出现 div，并且在将鼠标悬停在圆圈上时应该突出显示该圆圈，

我是 JS 新手，不知道从哪里开始，我寻找了 SVG.js 和 vivus.js 之类的库，但是对于这个小任务来说它们太复杂了，请帮助我，谢谢

【问题讨论】：

标签： javascript html svg

【解决方案1】：

使用jQuery，分别在鼠标进入和离开所需圆圈时显示/隐藏一个div。

下面是 div 切换的 sn-p 并查看 working fiddle

$(function() {
  $("#XMLID_359_").hover(function(){
    $('#one').toggle();
    $(this).addClass('transform');
  });

  $("#XMLID_362_").hover(function(){
    $('#two').toggle();
    $(this).addClass('transform');
  });

  $("#XMLID_67_").hover(function(){
    $('#three').toggle();
    $(this).addClass('transform');
  });

  $("#XMLID_359_,#XMLID_362_, #XMLID_67_").mouseleave(function(){
    $(this).removeClass('transform');
  });
});

CSS

#one, #two, #three{
  display: none;
}
#XMLID_359_, #XMLID_362_, #XMLID_67_{
  transition: all 200ms ease-in;
}
.transform{
  transform: scale(1.1, 1.1);
}
#XMLID_362_.transform{
  transform: scale(1.1, 1.1) translateX(-72.3px);
}

您必须在应用程序中包含jQuery 库。

【讨论】：

太棒了！非常感谢，我可以知道如何在悬停时突出显示相关圆圈吗？
高亮是什么意思？它应该填充一些颜色还是聚焦或缩小？
圆圈的颜色可能变浅或聚焦？
查看答案的更新，我没有太多时间，所以我在红色圆圈中添加了 transform 和 transition css 规则。您可以根据自己的要求做类似的事情。
我不得不使用转换 css 改进编辑，以便 @user8006503 可以更好地理解。谢谢。

【解决方案2】：

试试下面的代码

function showMe1(){
document.getElementById('one').style.color="";
}

function showMe2(){
document.getElementById('two').style.color="";
}


function showMe3(){
document.getElementById('three').style.color="";
}

document.getElementById('one').style.color="transparent";
document.getElementById('two').style.color="transparent";
document.getElementById('three').style.color="transparent";

 div:hover {
      visibility: visible;
    }

     <div id='one' onmouseover="showMe1()">
      items that should appear when hovering over 01(red circle) on the svg image
    </div>

    <div id='two' onmouseover="showMe2()">
      items that should appear when hovering over 02(green circle) on the svg image
    </div>
    <div id='three' onmouseover="showMe3()">
      items that should appear when hovering over 03(purple circle) on the svg image
    </div>

【讨论】：

谢谢，但我想知道谁能使用 SVG