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

Question

一个折叠表格，

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

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

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

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

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

这个有办法解决吗？

Answer 1

表格嘛。。。你套个 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-linemouseout tbody 删掉 class show-line