Question

我有一个带有1个td的表，并且我在其上附加了onmouseover事件处理程序，它将div的dispay属性从“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

在你摆弄它之后（在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/

Answer 2

当你越过onmouseout时，DIV上的A可能会触发。

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

onmouseout麻烦 - 简单的下拉菜单Javascript

2 个答案: