js里mouseover事件和mouseout事件时有这种情况

Question

一个折叠表格，

鼠标移入其中一行的时候，会显示它下面的子项，，

鼠标移出的时候，会隐藏它下面的子项，，

这时就会产生一个问题，
显示它子项时，DOM结构改变，该行的位置也变了，鼠标自动离开该行区域，也就自动触发了鼠标移出事件。

鼠标移出事件里，子项隐藏，该行位置恢复，然后自动触发鼠标移入事件，，

然后循环往复，表格闪烁不停。。。

这个有办法解决吗？

Answer 1

你加个动画缓冲一下

Answer 2

stop()函数，在移入移出前面加stop()

$("#stop").stop().mouseover(function(){
 
});

Answer 3

试试用mouseenter和mouseleave代替

Answer 4

把子项 DOM 写在父项 DOM 中

Answer 5

可以让子项脱离文档流，这样就不会导致父级DOM位置改变

Answer 6

我觉得，在样式改变的外层加个盒子，把位置占住；这样显示、隐藏，能控制样式

Answer 7

首先不理解，移上为什么需要位置变化。
解决办法，不要移上dom位置变化，并把子元素放置到父元素内

Answer 8

按楼上 @边城 的思路
表格嘛。。。你套个 tbody 啊

<style>
.data .line {display:none}
.show-line .line {display:table-row;}
</style>
<tbody class="data">
    <tr class="title"><td>Title<td></tr>
    <tr class="line"><td>line 1<td></tr
    <tr class="line"><td>lin3 2<td></tr
    <tr class="line"><td>line 3<td></tr
</tbody>

mouseover tbody 加个 class show-line
mouseout tbody 删掉 class show-line

Answer 9

子项也添加对应的hover事件就行了

Answer 10

设置延时。mouseout 延时(例如100ms)隐藏子项，如果鼠标在行或子项位置移动，会再次触发 mouseover，这时候取消延时。这个方法在设计类似抽屉功能时非常有用。