JSFiddle - React, Tailwind, and code Playground

by Toby Neilan

HTML

<div class="box" data-catid="1">data-catid=1</div>
<div class="box" data-catid="2">data-catid=2</div>
<div class="box" data-catid="3">data-catid=3</div>

CSS

.red {
  background: #ff1900;;
}

.blue {
  background: #18b0f7;
}

.yellow {
  background: #ffde00;
}

JavaScript

$( ".box" ).hover(
  function() {
    var category = $(this).attr("data-catid");
    
    $(".box").hover(
    function() {
    if (category == 1) 
        //mouse over
        $(this).css('background', "rgb(251,25,0)")
    }, function() {
        //mouse out
        $(this).css('background', "rgb(241,241,241)")
        
   if (category == 2) 
        //mouse over
        $(this).css('background', "rgb(24, 176, 247)")
    }, function() {
        //mouse out
        $(this).css('background', "rgb(241,241,241)")
        
  if (category == 3) 
        //mouse over
        $(this).css('background', "rgb(255, 222, 0)")
    }, function() {
        //mouse out
        $(this).css('background', "rgb(241,241,241)")
    });
    
});