防止行内的编辑控件在鼠标位于其上时闪烁

Question

我有一个 tr，里面有一个 div 和一个 glyphicon-pencil。

在 tr 鼠标悬停时，我正在显示 div。在 tr mouseout 上，我隐藏了 div.

以上都很好。

但是，当鼠标在 div 或字形上时，tr 会一直记录鼠标悬停和鼠标移开，因此字形会一直闪烁。

如何防止内部对象导致外部对象发生鼠标移开。

这是我试过的代码（包括Vue.js）：

<tr v-cloak v-for='res in store.reservations' @mouseover='setShowTools(res)' @mouseout='unsetShowTools(res)' >
    <td>{{res.entryDate | longToDate | dateOnly}}</td>
    <td>{{res.fromDate | parseDateOnly | dateOnly }}</td>
    <td>{{res.toDate | parseDateOnly | dateOnly }}</td>
    <td>{{res.guestName}}</td>
    <td>{{res.guestContact}}</td>
    <td>{{res.numRooms}}</td>
    <td><div @mousemove.stop @mouseover.stop v-if='res.showTools'><span class="glyphicon glyphicon-pencil"></span></div></td>
</tr>

Answer 1

使用 mouseleave 而不是 mouseout！ Mouseleave 不会因输入子元素而触发。

在此 link 找到了解决方案，但尚未将其标记为已接受的答案。

防止行内的编辑控件在鼠标位于其上时闪烁

Prevent Edit control inside a row from flickering when mouse is on it

javascript

mouse

events

vue.js