JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr class="row">
<td><span title="Row 1, Cell 1">Row 1, Cell 1</span></td>
<td><span title="Row 1, Cell 2">Row 1, Cell 2</span></td>
<td><span title="Row 1, Cell 3">Row 1, Cell 3</span></td>
</tr>
<tr class="row">
<td><span title="Row 2, Cell 1">Row 2, Cell 1</span></td>
<td><span title="Row 2, Cell 2">Row 2, Cell 2</span></td>
<td><span title="Row 2, Cell 3">Row 2, Cell 3</span></td>
</tr>
<tr class="row">
<td><span title="Row 3, Cell 1">Row 3, Cell 1</span></td>
<td><span title="Row 3, Cell 2">Row 3, Cell 2</span></td>
<td><span title="Row 3, Cell 3">Row 3, Cell 3</span></td>
</tr>
<tr class="row">
<td><span title="Row 4, Cell 1">Row 4, Cell 1</span></td>
<td><span title="Row 4, Cell 2">Row 4, Cell 2</span></td>
<td><span title="Row 4, Cell 3">Row 4, Cell 3</span></td>
</tr>
</table>

CSS

.ui-state-hover { background-color: yellow; }

JavaScript

$('table').bind('mouseover',function(e) {
        $(e.target).closest("tr.row").addClass("ui-state-hover");
        return false;
    }).bind('mouseout',function(e) {
        $(e.target).closest("tr.row").removeClass("ui-state-hover");
        return false;
    });