一个页面有 4 个 div:
- 项目 A
- B项
- 项目 C
- 详细信息(隐藏)
想要的效果是当鼠标悬停在项目框上时会显示详细信息框,一旦鼠标移出就会隐藏。显示时,详细信息框将与项目框右侧约 20% 重叠。
但是,我得到的当前错误效果是,当我将鼠标悬停在任何项目框的右边缘时,它会进入显示和隐藏详细信息框的永久循环。大概这是因为它触发了 Item 框的 mouseout 事件(当 Details 显示时),但在 Details 框隐藏时立即再次触发 mouseover 事件。我想知道如何解决这个问题。
我目前的代码是:
$('div.item').hover(
function() {
$(this).showDetails();
},
function() {
$(this).hideDetails();
}
);
提前感谢您的任何指点!这是任何无法可视化的人的 jsfiddle 链接。尝试将鼠标悬停在右侧的项目框上,然后稍微移动鼠标,您会看到闪烁的情况。
Xavier,我已经为详细信息框尝试了 appendTo,但我想要的效果是我想让鼠标事件只针对可操作的 div(即项目)。经过一些研究,我什至很确定这是否可能,因为详细信息框覆盖了 div(因此无法将事件附加到它下面的东西)