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>

CSS

.red {
  background: red;
}

.blue {
  background: blue;
}

JavaScript

$( ".box" ).mouseenter(function() {
    $(this).css("background-color", "red");
  })
  
  
    
    var category = $(this).attr("data-catid=1");
    
   $( ".box" ).mouseleave(function() {
    $(this).css("background-color", "");//do something
  })
  $( ".box" ).mouseenter(function() {
    $(this).css("background-color", "blue");
  })
  
  
    
    var category = $(this).attr("data-catid=2");
    
   $( ".box" ).mouseleave(function() {
    $(this).css("background-color", "");//do something
  });