JSFiddle - React, Tailwind, and code Playground
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor
elit orci. Etiam eu odio vitae tortor bibendum sodales vitae quis velit.
Sed diam lorem, feugiat vel ultrices nec, pretium sed elit. Vivamus lorem
est, commodo eget fermentum ac, facilisis ut mi. Phasellus rhoncus metus
sed diam facilisis suscipit id quis quam. Nullam ac urna quam. Pellentesque
ullamcorper pharetra elit a semper. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Morbi placerat lectus eget
nunc viverra tempor. Nam commodo ornare libero eget pharetra. Fusce non
risus id magna imperdiet hendrerit. Sed pellentesque venenatis odio. Etiam
egestas porta euismod. Fusce sagittis sapien eu turpis lacinia porttitor.
Nunc pharetra justo eget augue feugiat scelerisque. Donec congue porta
dictum. Ut metus lectus, accumsan a aliquam vel, elementum iaculis mauris.
Vivamus ullamcorper, magna faucibus scelerisque dictum, libero lacus eleifend
dolor, quis fringilla nulla urna in quam. Duis ipsum est, commodo id tempus
sit amet, congue et justo.</p>
CSS
body {
margin:40px
}
p {
position:relative;
text-align:justify;
font: 14px/18px Arial;
}
p span {
background:yellow;
display:none;
position:absolute;
left:0;
z-index:-1;
}
p:hover {
cursor:default;
}
JavaScript
$(document).ready(function () {
var theLineheight = $('p').css('line-height');
var Lineheight = parseInt(theLineheight);
var thePheight = $('p').height();
window.onresize = function () {
return thePheight = $('p').height();
}
$('p').append('<span style="height:' + theLineheight + ';width:100%"></span>');
$('p').mousemove(function (e) {
$('p span').show();
mouseTop = e.pageY - this.offsetTop;
topPos = Math.ceil(mouseTop / Lineheight) * Lineheight - Lineheight;
$('p span').css('top', topPos + 'px');
if (topPos > (thePheight - Lineheight)) {
$('p span').hide();
}
}).mouseout(function (e) {
$('p span').hide();
});
});