JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <th>Fruit</th><th>Ripe</th><th>Not Ripe</th><th>Rotten</th>
    </thead>
    <tr class="hirow">
        <td>Apples</td><td>500</td><td>250</td><td>100</td>
    </tr>
     <tr class="hirow">
        <td>Oranges</td><td>200</td><td>30</td><td>0</td>
    </tr>
     <tr class="hirow">
        <td>Pears</td><td>1500</td><td>450</td><td>300</td>
    </tr>
     <tr class="hirow">
        <td>Peaches</td><td>700</td><td>150</td><td>400</td>
    </tr>

CSS

.highlighted td{
            background-color: lightsteelblue;
        }
table {
    border-collapse: collapse;
}
td {
    border-color:gray;
    border-style:solid;
    border-width:1px;
}
th {
    border-color:gray;
    border-style:solid;
    border-width:1px;
    background-color:lightgray;
}

JavaScript

$(document).ready(function () {
                $("table").hover(function () {
                    //removes the highlight when not over a td
                    $(".highlighted").removeClass("highlighted");
                });
                $("td").not(".hirow").hover(function () {
                    //clears the highlight from the old highlighted row
                    $(".highlighted").removeClass("highlighted");
                });
                $(".hirow").hover(function () {
                    //.actually highlights currently hovered over row with class of hirow
                    $(".highlighted").removeClass("highlighted");
                    $(this).addClass("highlighted");
                });
});