JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div id="message">
Hello!!
</div>
<div class="message2">
Hello2!!
</div>
<div class="holder">
Hello div holder
</div>
<svg width="400" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" id="circle-symbol" stroke-width="4" fill="yellow" />
  <circle cursor="pointer" cx="150" cy="50" r="40" stroke="green" id="circle-symbol1" stroke-width="4" fill="yellow" />
</svg>

CSS

#message {
  display: none;
}

    .message2{
      opacity: 0;
    }
#circle-symbol1:hover .message2{
      opacity: 1 !important;
}

.holder{
  width: 300px;
  height: 100px;
  float: left;
  border: #f00 solid 1px;
}

.holder:hover + div{
  border: #0f0 solid 1px;
  opacity: 1;
}

JavaScript

const div = document.querySelector('#message');

const svg = document.querySelector('#circle-symbol');

const showMessage = () => {
	div.style.display = 'block';
}

const hideMessage = () => {
	div.style.display = 'none';
}

svg.addEventListener('mouseover', showMessage);

svg.addEventListener('mouseout', hideMessage);