JSFiddle - React, Tailwind, and code Playground

HTML

<table id="test">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
        </tr>
    </table>

CSS

td {
    padding:3px;
}

JavaScript

//Demonstrate problem with mouseover, works sporadically (if at all) in Chrome
$("#test").on('mouseover', 'td:nth-child(3), td:nth-child(8)', function () {
    $(this).css({'backgroundColor': 'Green'});
});

//Demonstrate problem with mouseenter, works sporadically (if at all) in Chrome
$("#test").on('mouseenter', 'td:nth-child(2)', function () {
    $(this).css({'backgroundColor': 'Yellow'});
});


//Demonstrate javascript is running, should work fine in all browsers
$("#test").on('click', 'td', function () {
    $(this).css({'backgroundColor': 'Red'});
});