CODEWITHSUNDEEP
javascripthtmlsvg
user8006503
user8006503

Reputation: 31

How can I make a div appear when hovering over a SVG path?

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

Upvotes: 1

Views: 1312

Answers (2)

Sajal
Sajal

Reputation: 4401

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.

Upvotes: 2

Nisal Edu
Nisal Edu

Reputation: 7591

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>

Upvotes: 0

Related Questions