首頁猿問 js里mouseover事件和mo...

js里mouseover事件和mouseout事件時有這種情況

Vue.js

慕工程0101907 2019-03-20 14:15:47

一個折疊表格，鼠標(biāo)移入其中一行的時候，會顯示它下面的子項(xiàng)，，鼠標(biāo)移出的時候，會隱藏它下面的子項(xiàng)，，這時就會產(chǎn)生一個問題，顯示它子項(xiàng)時，DOM結(jié)構(gòu)改變，該行的位置也變了，鼠標(biāo)自動離開該行區(qū)域，也就自動觸發(fā)了鼠標(biāo)移出事件。鼠標(biāo)移出事件里，子項(xiàng)隱藏，該行位置恢復(fù)，然后自動觸發(fā)鼠標(biāo)移入事件，，然后循環(huán)往復(fù)，表格閃爍不停。。。這個有辦法解決嗎？

查看完整描述

2 回答

holdtom

TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個贊

表格嘛。。。你套個 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

反對回復(fù) 2019-03-20