JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mainTable" class='aa'>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Children</th>
    </tr>
    <tr>
        <td>Justin</td>
        <td>28</td>
        <td>
            <table>
                <tr>
                    <th>Child Name</th>
                    <th>Child Age</th>
                </tr>
                <tr>
                    <td>John</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Jimmy</td>
                    <td>2</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>Justin</td>
        <td>28</td>
        <td>
            <table>
                <tr>
                    <th>Child Name</th>
                    <th>Child Age</th>
                </tr>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <th>Sur</th>
                                <th>Last</th>
                            </tr>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                            </tr>
                        </table>
                    </td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <th>Sur</th>
                                <th>Last</th>
                            </tr>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                            </tr>
                        </table>
                    </td>
                    <td>2</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}
#mainTable .hover {
    background-color: #DDFF75;
}
#mainTable .hover .hover {
    background-color: #AAFF75;
}
#mainTable tr {
    outline: 1px solid #aaa;
}
#mainTable td {
    outline: 0;
    border:0;
}

JavaScript

$('#aa').on('mouseenter mouseleave', 'tr', {el: false}, function (e) {
    console.log(this, e.type, e.data.el);
    var hl = e.data.el;
    hl && hl.removeClass('hover');
    
    e.data.el = (e.type === 'mouseenter') ?
        $(this).addClass('hover') :
        $(this).parent().closest('tr:hover').addClass('hover');
});