JSFiddle - React, Tailwind, and code Playground

by Nikita Jadhao

HTML

<table>
    <tr  class="top">
        <td rowspan="2"><span>something</span></td>
        <td><span>anything..</span></td>
    </tr>
    <tr class="bottom">
            <td><span >anything..</span></td>
    </tr>
</table>

CSS

.top{
    background-color:#eee
}
.bottom{
    background-color:#adf
}

JavaScript

$(document).ready(function() {
    $('.top').on({
        mouseenter: function() {
            var bottom = $(this).next(".bottom");
            bottom.css("background-color","#EEE");
        }, mouseleave: function() {
             var bottom = $(this).next(".bottom");
            bottom.css("background-color","#adf")   ;
        }
    });
    
    $('.bottom').on({
        mouseenter: function() {
            var bottom = $(this).prev(".top");
            bottom.css("background-color","#adf");
        }, mouseleave: function() {
             var bottom = $(this).prev(".top");
            bottom.css("background-color","#eee")   ;
        }
    });
});