score:3

Accepted answer

No Javascript needed for anything you want to do.

circle {
  fill: black;
}
circle:hover {
  fill: green;
}
ellipse {
  fill: grey;
}
ellipse:hover {
  fill: blue;
}
rect {
  fill: red;
}
g.textlabel {
  font-family: sans-serif;
  font-size: 11px;
  fill: red;
  opacity: 0;
  pointer-events: none;
}
rect:hover + g {
  opacity: 1;
}
<svg width="500" height="500">
  <circle cx="100" cy="200" r="100" fill="black"></circle>
  <ellipse cx="200" cy="200" rx="100" ry="100" fill="grey"></ellipse>
  <rect x="100" y="400" width="100" height="500" fill="red"></rect>
  <g class="textlabel">
    <text x="75" y="273">100,450</text>
    <text x="130" y="273">200,450</text>
    <text x="75" y="227">100,550</text>
    <text x="130" y="181">200,650</text>
    <text x="47.5" y="273">50,450</text>
    <text x="130" y="135">200,750</text>
    <text x="20" y="181">0,650</text>
    <text x="130" y="227">200,550</text>
    <text x="157.5" y="273">250,450</text>
    <text x="53" y="181">60,650</text>
    <text x="157.5" y="227">250,550</text>
    <text x="20" y="227">0,550</text>
    <text x="20" y="135">0,750</text>
    <text x="47.5">50,750</text>
    <text x="75" y="135">100,750</text>
  </g>
</svg>


Related Query