JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<table>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td class='inactive'>blah</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
    </tr>
</table>

CSS

.div-to-display {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid red;
    background-color: #eee;
    z-index: 10;
}
td {
    position: relative;
}
td:not(.inactive):hover > .div-to-display {
    display: block
}

JavaScript

// Add our div to every td
$('td').append('<div class="div-to-display">yay</div>');