0

我正在实现一个代码，其中我有包含 n 个子 div 的父 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
{
}
}
4

1 回答 1

4

你div#root只是一个包装器 div，它没有任何直接可视的文本节点或填充空白。所以它不会自己发出鼠标事件。

它通过事件冒泡mouseout从其可见的后代元素接收事件。因此，任何时候您的鼠标离开或( , , ... 实际上)，都会引发一个事件并冒泡到.div#topdiv#maindiv#1div#2mouseoutdiv#root

由于您没有解释您想要的详细效果，因此无法做出好的答案。

如果你正在编写一个带有mouseover/mouseout效果的下拉导航面板，你可以添加一个mouseover处理程序div#root来显示div#main。当您将鼠标从一个项目移动到另一个项目时div#main，将在处理程序执行之后和之前mouseover触发。mouseoutmouseout

检查jsFiddle看看它是否是你想要的。请注意，悬停效果可以纯粹在 CSS 中实现。

于 2013-04-15T08:44:49.967 回答