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

Question

我有一个带有 1 td 的表，我在上面附加了 onmouseover 事件处理程序，它将 div 的显示属性从“无”更改为“ 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