JSFiddle - React, Tailwind, and code Playground

by johan durand

HTML

<div id="wrap">
<div id="box1"></div>
<div id="box2"></div>
<ul>
 <li><a href=".." id="a1">text1</a></li>
 <li><a href=".." id="a2">text2</a></li>
</ul>
</div>

CSS

#wrap{
border:solid 1px red;
}

#box1{
height:20px;
    background:red;
}
ul, li{
display:block;
}
#box2{
height:20px;
    background:yellow;
}

#a1, #a2, .a1, .a2{
background:green;
    padding:10px;
    color:#fff;
    margin:10px;
    display:inline-block;
}




.a1_hover{
background:red !important;
    color:black !important;
}


.a2_hover{
background:yellow !important;
    color:black !important;
}

JavaScript

$(document).ready(function() {
    $("#box1").mouseenter(function(){
        $("#a1").addClass("a1_hover");
    });
    
    
    $("#box1").mouseleave(function(){
        $("#a1").removeClass("a1_hover");
        $("#a1").addClass("a1")
    });
        
        $("#box2").mouseenter(function(){
        $("#a2").addClass("a2_hover");
    });
    
    
    $("#box2").mouseleave(function(){
        $("#a2").removeClass("a2_hover");
        $("#a2").addClass("a2")
    });
        
});