javascript - 在行/单元格之间调用表的 Onmouseout 函数

Question

我有一个带有 onmouseover 功能的图像，它会在图像上显示一个带有一些选项的表格(图像变暗)。表格有一个 onmouseout 函数，它应该隐藏表格并再次显示图像。我遇到的问题是，每当鼠标在行或单元格之间移动，甚至在单元格内的链接上移动时，表格都会闪烁，就好像鼠标离开了表格一样。我该如何解决这个问题？

JSFiddle

<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>

Answer 1

如果有人需要使用 JavaScript 的答案，对我有用的是使用 onmouseenter 和 onmouseleave 而不是 onmouseover 和 onmouseout.

onmouseenter 和 onmouseleave 不会冒泡，因此当您将鼠标悬停在 child 上时，它们不会给您带来闪烁的效果。