JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr data-title="1st Title">
<th>ABC</th>
<th>DEF</th>
</tr>
<tr data-title="2nd Title">
<th>ABC</th>
<th>DEF</th>
</tr>
<tr data-title="3rd Title">
<th>ABC</th>
<th>DEF</th>
</tr>
</table>

CSS

li:hover {
    background-color: yellow;
}

JavaScript

$('ul').on({
    mouseenter: function () {
        $('h1').text('This title');
    },
    mouseleave: function () {
        $('h1').text('A title');
    }
});