我正在实现一个代码，其中我有父 div，其中包含 n 个子 div。我有一个针对主 div 的 mouseout 函数，以及针对子 div 的不同 mouseout 函数。
我的代码结构将是这样的。
<div id="root" onmouseout="dohide('main');">
<div id="top">title</div>
<div id="main">
<div id="1" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">1</div>
<div id="2" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">2</div>
<div id="3" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">3</div>
<div id="4" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">4</div>
<div id="5" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">5</div>
</div>
</div>
当我鼠标输入时，代码工作得很奇怪。当我将鼠标悬停在主 div 上时，它的可见性设置为隐藏。但我的代码是仅在鼠标移开时更改可见性。是因为父div里面有子div吗？如何纠正？
function dohide(cb_hd_id)
{
if(document.getElementById(cb_hd_id).style.visibility=="visible")
{
document.getElementById(cb_hd_id).style.visibility="hidden";
}
else
{
}
}
最佳答案
你div#root只是一个包装 div，它没有任何直接可见的文本节点或填充空白。因此它不会自行发出鼠标事件。
它收到 mouseout来自其可见后代元素的事件，作者:event bubbling 。因此，只要您的鼠标离开 div#top或div#main (div#1，div#2，...确实)，一个mouseout事件将被引发并冒泡到 div#root .
由于你没有解释你想要的详细效果，所以无法做出很好的答案。
如果您正在使用 mouseover 编写下拉导航面板/mouseout效果，可以添加mouseover处理程序至div#root显示div#main 。当您将鼠标从 div#main 中的一项移至另一项时, mouseover将在 mouseout 之后被解雇在mouseout执行之前处理程序。
检查jsFiddle看看是否是您想要的。注意可以实现悬停效果purely in CSS .
关于javascript - 一组 div 上的鼠标悬停无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16010002/