JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class='nojs'>No js, just css. Hover</div><div class='circle'></div>
<div class='js'>Using js. Hover</div><div class='circle'></div>

CSS

.circle{
    width:100px;
    height:100px;
    background:#1367ac;
    transition:all .3s;
    border-radius:0;
    margin:20px;
}
.nojs, .js{
    background:#ccc;
}
.nojs:hover + .circle{
    border-radius:100%;
    background:#ac7631;
}
.circle.hover{
    border-radius:100%;
    background:#ac7631;
}

JavaScript

document.querySelector('.js').onmouseover = function(){
	this.nextElementSibling.classList.add('hover');
}
document.querySelector('.js').onmouseout = function(){
	this.nextElementSibling.classList.remove('hover');
}