JSFiddle - React, Tailwind, and code Playground

by Kalashnikov

HTML

<table>
    <tr><td> Lorem </td></tr>
    <tr><td> ipsum </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
    <tr><td> </td></tr>
</table>

<div id="bg"></div>

CSS

table {
    width: 90%;
    margin: 30px auto;
}

td {
    height: 30px;
    border: 1px solid #aaa;
}

#bg{
    background: #a5a;
    position: absolute;
    z-index: -1;
    
    transition: top .1s;
}

JavaScript

$("tr").on("mouseover", function(event) {
    var bg = $("#bg");
    var e = $(this);
    var offset = e.offset();
    bg.css("left", offset.left + "px");
    bg.css("top",  offset.top  + "px");

    bg.css("width", e.width()+"px");
    bg.css("height", e.height()+"px");
});