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

这是你想要它的工作方式吗？

http://jsfiddle.net/9s89bL3u/2/

只有css和html。

.test2 {
    position: relative;
    width: 495;
    height: 330px;
    background-color: blue;
}
.test1:hover table{
    visibility: visible;        
}
.test1:hover .test2{
    opacity: 0.3;        
}

table {
    position: absolute;
    top: 0px;
    width: 495px;
    height: 330px;
    border-collapse: collapse;
    visibility: hidden;
    border-spacing: 0px;
}
table td {
    width: 247.5px;
    text-align: center;
}

Answer 2

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

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

Answer 3

记住应该出现两个重要的事情：

<!doctype html> //at the very top of the page

border="0" cellspacing="0" cellpadding="0" //inside your table tag

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

3 个答案: