JSFiddle - React, Tailwind, and code Playground

by Sam Fereday

HTML

<svg width="100" height="100">
  <g id="hoverMe">
    <circle id="content" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <circle id="cog" cx="25" cy="25" r="12" stroke="green" stroke-width="4" fill="blue" />
  </g>
</svg>

SCSS

#hoverMe:hover {
  circle {
    stroke: blue;
    fill: red;
  }
  #cog {
    opacity: 1;
  }
}

#cog {
  opacity: 0;
}

#cog:hover {
  opacity: 1;
  cursor: pointer;
}

JavaScript

document.getElementById('cog').addEventListener('click', () => {
	alert('Chebs');
});