JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td id="td1"><div id="div1"></div></td>
    </tr>
    <tr>
        <td id="td2"><div id="div2"></div></td>
    </tr>
</table>

CSS

table {
    width: 0px;
    table-layout: fixed;
}

td {
    width:50px;
    height:50px;
    overflow: visible;
}

#td1 {
    background-color: red;
}

#td2 {
    background-color: green;
}

#div1 {
    width: 20px;
    height: 200px;
    background-color: yellow;
}


#div2 {
    width: 200px;
    height: 20px;
    background-color: blue;
}

JavaScript

$("td").mouseenter(function() {
   alert("In a td"); 
});