JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<a>link to hover...</a>

<div id="content-a">
To be display
</div>

<!-- -->

<svg width="400" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" class="anch-link" stroke-width="4" fill="yellow" />
  <circle cursor="pointer" cx="150" cy="50" r="40" stroke="green" class="content-a2" stroke-width="4" fill="yellow" />
</svg>

CSS

#content-a{
  border: #f00 solid 1px;
  display: none;
}

a:hover ~ #content-a {
    display: inline;
}

.content-a2{
  border: #f00 solid 1px;
  display: none;
}

.anch-link:hover + .content-a2 {
    display: inline;
}