JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle"></div>
<div class="circle2"></div>

CSS

.circle {
        position: absolute;
        top: 25px;
        left: 25px;
        width: 100px;
        height: 100px;
        color: transparent;
        border: 2px solid red;
        border-radius: 50%;

        z-index: 5;
    }
    .circle2 {
        position: absolute;
        top: 0px;
        width: 100px;
        height: 100px;
        color: transparent;
        border: 2px solid blue;
        border-radius: 50%;

        
    }

JavaScript

const CIRCLE = document.querySelector('.circle');
const CIRCLE2 = document.querySelector('.circle2');



function changeColorOnTouch() {
    CIRCLE.style.backgroundColor = "red";
    CIRCLE.style.borderColor = "red";
}

function changeColorOnTouch2() {
    CIRCLE2.style.backgroundColor = "blue";
    CIRCLE2.style.borderColor = "blue";
}

CIRCLE.addEventListener('mouseenter', changeColorOnTouch, false);
CIRCLE2.addEventListener('mouseenter', changeColorOnTouch2, false);


CIRCLE.addEventListener('mouseleave', function(){CIRCLE.removeAttribute("style");}, false);
CIRCLE2.addEventListener('mouseleave', function(){CIRCLE2.removeAttribute("style");}, false);