JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>IE8 Table Hover</title>
</head>
<body>
<div id="hoverdiv"> </div>
</body>
</html>
CSS
#hoverdiv {
position: absolute;
background: #cc0000;
display: none;
width: 100%;
z-index: 1;
}
table {
position: relative;
z-index: 5;
}
JavaScript
var numRows = 100;
var numCols = 50;
function renderTable () {
var a = [];
a.push('<table id="table"><tbody>');
for (var i=0; i < numRows; i++) {
a.push('<tr>');
for (var j=0; j < numCols; j++) {
a.push('<td>');
a.push(i + ':' + j);
a.push('</td>');
}
a.push('</tr>');
}
a.push('</tbody></table>');
var div = document.createElement('div');
div.innerHTML = a.join('');
div = document.body.appendChild(div);
var rows = div.getElementsByTagName('tr');
var hoverdiv = document.getElementById("hoverdiv");
for (var i=0; i < rows.length; i++) {
rows[i].onmouseover = function (event) {
var top = this.offsetTop;
hoverdiv.style.top = top + 10 + "px";
hoverdiv.style.display = "block";
}
}
document.getElementById("table").onmouseout = function (event) {
hoverdiv.style.display = "none";
}
}
window.onload = function () {
renderTable();
}