JSFiddle - React, Tailwind, and code Playground

by jassi9911

HTML

<div class="delhi">Delhi</div>
<div class="punjab">Punjab</div>
<div class="haryana">Haryana</div>

CSS

.delhi, .punjab, .haryana {
    background:lightgray;
    width:100px;
    height:100px;
    float:left;
    margin-right:10px;
}

.redColor {
    background:red;
}

.greenColor {
    background:green;
}

JavaScript

$(".delhi").hover(function(){
  $(this).addClass("redColor");
  $(".punjab").addClass("redColor");
  },function(){
  $(this).removeClass("redColor");
  $(".punjab").removeClass("redColor");
}); 

$(".haryana").hover(function(){
  $(this).addClass("greenColor");
  $(".punjab").addClass("greenColor");
  },function(){
  $(this).removeClass("greenColor");
  $(".punjab").removeClass("greenColor");
}); 

$(".punjab").hover(function(){
  $(this).addClass("redColor");
  $(".delhi").addClass("redColor");
  },function(){
  $(this).removeClass("redColor");
  $(".delhi").removeClass("redColor");
});