JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>
                <div class="hover-target"></div>
                <p>Name</p>
            </th>
        </tr>
    </thead>
</table>

CSS

th {
    position: relative;
    width: 100px;
}
.hover-target {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: gray;
    width: 10px;
    height: 100%;
}

JavaScript

$(function () {

    $("#myTable thead tr .hover-target").mouseover(function () {
        $(this).parent().css("background-color", "red");
    });
    $("#myTable thead tr .hover-target").mouseout(function () {
        $(this).parent().css("background-color", "white");
    });
});