JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div id="first"></div>
<div id="two"></div>
<div id="three"></div>

CSS

#first {
    width:200px;
    height:200px;
    background:red;
    display:inline-block;
}
#two {
    display:inline-block;
    width:200px;
    height:200px;
    background:green;
}
#three {
    width:200px;
    height:200px;
    background:blue;
    display:inline-block;
}
.ase {
    background:#eeaaaa!important;
}

JavaScript

$('#first').hover(

function () {
    $('#two').addClass('ase')
},
function () {
    $('#two').removeClass('ase')
});
$('#two').hover(

function () {
    $('#three').addClass('ase')
},
function () {
    $('#three').removeClass('ase')
});
$('#three').hover(

function () {
    $('#first').addClass('ase')
},
function () {
    $('#first').removeClass('ase')
});