JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
Grey block is all one row, it'll act as a single hover
<table id="tableid">
<tr>
    <td>Test Row</td>
</tr>
<tr>
    <td>Test Row 2</td>
</tr>
<tr class="unit">
    <td>
        <table>
            <tr>
                <td>Test Inner Row - Won't Hit</td>
            </tr>
            <tr>
                <td>Test Inner Row 2 - Won't Hit</td>
            </tr>
            <tr>
                <td>Test Inner Row 3 - Won't Hit</td>
            </tr>
        </table>
        In the row, outside table
    </td>
</tr>
</table>
<span></span>

CSS

.unit { background-color: #ddd; }
.hover { background-color: #990000; }

JavaScript

$("#tableid").delegate("#tableid > tbody> tr", "mouseenter mouseleave", function(e) {
  $(this).toggleClass("hover");
});