onmouseout 的问题 - 简单的下拉菜单 Javascript

Question

我有一个带有 1 个 td 的表，并在其上附加了 onmouseover 事件处理程序，这将 div 的显示属性从“none”更改为“block”，我想用 div 做同样的事情 - 将处理程序附加到onmouseout 事件只需将显示更改回“无”即可。不幸的是，当我将光标从 td 移到 div 时，当它触及 div 边框时，div 消失了。什么问题？这是极其简单的代码示例：

<table>
<tr>
        <td onmouseover="showMenu()" >BLOCK ONE</td>
    <td>BLOCK TWO</td>
</tr>
</table>

<div id="box1" onmouseout="hideMenu()">
    <a href="www.abv.bg">www.abv.bg</a><br>
    <a href="www.abv.bg">www.abv.bg</a><br>
    <a href="www.abv.bg">www.abv.bg</a><br>
    <a href="www.abv.bg">www.abv.bg</a><br>
    <a href="www.abv.bg">www.abv.bg</a><br>
    <a href="www.abv.bg">www.abv.bg</a><br>
    <a href="www.abv.bg">www.abv.bg</a><br>

</div>

javascript：

 function showMenu() {
var div = document.getElementById('box1');
div.style.display = 'block';

}

function hideMenu() {
var div = document.getElementById('box1');
div.style.display = 'none';

}

Answer 1

DIV 上的 onmouseout 可能会在您越过 A 时触发。

您可以将onmouseover="showMenu()"添加到DIV

Answer 2

给你，在摆弄了一下之后（在 jsFiddle 中），我为你找到了这个解决方案：

showMenu = function() {
    var div = document.getElementById('box1');
    div.style.display = 'block';
}

hideMenu = function() {
    var div = document.getElementById('box1');
    div.style.display = 'none';
}

这是在 jsFiddle 中的现场演示：http://jsfiddle.net/KBry6/1/