将鼠标悬停在SVG路径上时如何显示div？

Question

I'm working on this SVG image , 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>

I need the div appear when hovering over the relevant SVG circle , and the circle should be highlighted when hovering over it,

I'm new to JS and don't know where to start , I looked for libraries like SVG.js and vivus.js but they are too complicated for this small task , please help me out , thanks

Answer 1

Using jQuery, show/hide a div when the mouse enters and leaves the desired circle respectively.

Below is the snippet for div toggle and see the working fiddle

JS

$(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);
}

You would have to include the jQuery library in the application.

Answer 2

Try following code

 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>