JSFiddle - React, Tailwind, and code Playground

HTML

<div class="class1">class1</div>
<div class="class2">class2</div>

CSS

.class1,
.class2 {
    width: 40px;
    height: 40px;
    margin: 30px;
    background-color: gray;
}
.class1.hover,
.class2.hover {
    background-color: red;
}

JavaScript

$(".class1, .class2").hover(function() {
    //mouseenter
    $(this).addClass("hover");
}, function(){
    //mouseleave
    $(this).removeClass("hover");
});


$(".class1").mouseenter(function() {
    $(".class2").mouseenter();
}).mouseleave(function() {
    $(".class2").mouseleave();
});