JSFiddle - React, Tailwind, and code Playground

by Shaunak Deshpande

HTML

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table {
    table-layout:fixed;
    width:100%;
    height:300px;
    border-collapse:collapse;
}
td {
    border:1px solid black;
}
.hover {
    background:pink;
}

JavaScript

$('td').on('mouseover mouseout', function () {
    if ($(this).index() !== $(this).parent().index()) {
        $(this).toggleClass('hover');
        $('tr:eq(' + $(this).index() + ') td:eq(' + $(this).parent().index() + ')').toggleClass('hover');
    }
    else{
        $(this).toggleClass('hover');
    }
});