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="1000" height="100">
      <circle cx="50" cy="50" r="40" stroke="black" class="anch-link" stroke-width="4" fill="yellow" cursor="pointer" />
  <circle cx="200" cy="50" r="40" stroke="green" class="anch-link1" stroke-width="4" fill="yellow" cursor="pointer" />
    <circle cx="100" cy="50" r="40" stroke="green" class="anch-link2" stroke-width="4" fill="yellow" cursor="pointer" />

  <circle cursor="pointer" cx="150" cy="50" r="40" stroke="green" class="content-a2" stroke-width="4" fill="red" />
</svg>

CSS

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

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

.content-a2{
  border: #f00 solid 1px;
  opacity: 0;
}

.anch-link:hover ~ .content-a2 {
    -webkit-transition: opacity 1.0s ease-in;
       -moz-transition: opacity 1.0s ease-in;
         -o-transition: opacity 1.0s ease-in;
                                      opacity: 1;
}