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-line
mouseout tbody 删掉 class show-line