JSFiddle - React, Tailwind, and code Playground

by Harm Zeinstra

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
  <tr>
    <td class="color1">
      <p class="filter">
        sadhjkbfhjgjhgsfd
      </p>
    </td>
    <td class="color2">
      <p class="filter">
        sadhjkbfhjgjhgsfd
      </p>
    </td>
  </tr>
  <tr>
    <td class="color1">
      <p class="filter">
        sadhjkbfhjgjhgsfd
      </p>
    </td>
    <td class="color2">
      <p class="filter">
        sadhjkbfhjgjhgsfd
      </p>
    </td>
  </tr>
</table>

CSS

.filter {
             background-color: rgba(0, 0, 0, 0.3);
             color:white
           }
           
           .hover {
             background-color: rgba(0, 0, 0, 0.4);
             cursor: pointer;
           }
           
           td {
             height: 100px;
           }
           
           .color1 {
             background-color: lightblue;
           }
           
           .color2 {
             background-color: lightgreen;
           }

JavaScript

$(document).ready(function() {
  var cells1 = $("tr").find(".color1").find(".filter");
  var cells2 = $("tr").find(".color2").find(".filter");
  cells1.hover(
    function() {cells1.addClass("hover");},
    function() {cells1.removeClass("hover");}
  )
  cells2.hover(function() {cells2.addClass("hover");},
    function() {cells2.removeClass("hover");}
  )
});