Question

我正在实现一个代码，其中我有父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上时，它的可见性被设置为隐藏。但是我的代码只是在mouseout时更改可见性。是因为父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
{
}
}

Answer 1

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

它通过event bubbling从其可见的后代元素接收mouseout事件。因此，只要您的鼠标离开div#top或div#main（div#1，div#2，...确实），就会引发mouseout事件并冒泡到{ {1}}。

由于你没有解释你想要的详细效果，所以没有一个好的答案。

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

检查jsFiddle以查看它是否符合您的要求。请注意，悬停效果可以实现purely in CSS。

鼠标悬停在一组div不能正常工作

1 个答案: