<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#tab1, #tab2 {
position:absolute; /* located on the same x Y location */
top:100px; left:100px;
height:100px; width:100px;
text-align:center;
/* transition:all 0.5s ease; */
cursor:pointer;
}
#tab1 {
border:1px #888 solid;
}
#tab2 {
background-color:#99CC00;
opacity:0;
z-index:-1;
}
#tab2:hover
</style>
<script>
function showTab2()
{
var el = document.getElementById("tab2");
if (el.style.opacity == "0") {
el.style.zIndex = 2;
el.style.opacity = "1";
} else {
el.style.zIndex = -1;
el.style.opacity = "0";
}
}
</script>
<title>getBoundingClientRect</title>
</head>
<body>
<table id="tab1" onmouseover="showTab2()">
<tr>
<td>FIRST</td>
</tr>
<tr>
<td>Title</td>
</tr>
</table>
<table id="tab2" onmouseout="showTab2()">
<tr>
<td>SECOND</td>
</tr>
<tr>
<td>Description</td>
</tr>
</table>
</body>
</html>