My image has an onmouseover function that displays a table with options over the image (dimming the image). The table also has an onmouseout function to hide the table and show the image again. The issue I'm facing is that when the mouse moves between rows, cells, or links within the cells, the table flashes as if the mouse has exited the table. How can this be resolved?
<script type="text/javascript">
function dimImg(x) {
x.style.opacity = "0.3";
document.getElementById("happinessItems").style.visibility = 'visible';
}
function normalImg(x) {
document.getElementById('firstImg').style.opacity = "1.0";
x.style.visibility = 'hidden';
}
</script>
<style type="text/css">
table{
position: absolute;
top: 0px;
width: 495px;
height: 330px;
visibility: hidden;
border-collapse: collapse;
border-spacing: 0px;
}
table td {
width: 247.5px;
text-align: center;
}
</style>
<a href="happiness.php"><img id="firstImg" onmouseover="dimImg(this)" src="img/leftButton.jpg" style="display:inline-block; width:495px; margin-right:5px; -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222)" /></a>
<table cellspacing="0" id="happinessItems" onmouseout="normalImg(this)">
<tr><td><a href="#">Coats/Jackets</a></td><td><a href="#">Sweaters/Hoodies</a></td></tr>
<tr><td><a href="#">Dresses/Suits</a></td><td><a href="#">Tshirts/Tops</a></td></tr>
<tr><td><a href="#">Shoes</a></td><td><a href="#">Bags</a></td></tr>
<tr><td colspan="2"><a href="#">Accessories</a></td></tr>
</table>