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

Onmouseout function for table gets called between rows/cells

本文关键字：Onmouseout 函数 调用 单元格 之间 在行      更新时间：2023-09-26

我有一个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>

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

onmouseenter和onmouseleave没有气泡，所以当你将鼠标悬停在孩子们的上方时，它们不会给你闪烁的效果。

您希望它是这样工作的吗?

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

请记住两件重要的事情:

<!doctype html> //at the very top of the page
border="0" cellspacing="0" cellpadding="0" //inside your table tag
相关文章：