JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<div class="Test1">1</div>
<div class="Test2">2</div>

CSS

.Test1{
        position:relative;
        width:100px;
        height:100px;
        background-color:#951159;
    }

    .Test1:hover, .Test1.hover{
        background-color:#654654;
    }

    .Test2{
        position:relative;
        width:100px;
        height:100px;
        background-color:#147852;
    }

    .Test2:hover, .Test2.hover{
        background-color:#654654;
    }

JavaScript

$('.Test1').on('mouseenter', function() {
    $('.Test2').addClass('hover');
});

$('.Test1').on('mouseleave', function() {
    $('.Test2').removeClass('hover');
});