Question

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

在tr mouseover上，我正在显示div。在tr mouseout上，我隐藏了div。

以上所有都运作良好。

然而，当鼠标位于div或glyphicon上时，tr会继续注册mouseover和mouseout，因此glyphicon会一直闪烁。

如何防止内部对象在外部对象上造成鼠标悬停。

这是我尝试过的代码（包括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。

在此链接中找到解决方案，但尚未将其标记为已接受的答案。 https://stackoverflow.com/a/30697096/1364747

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

1 个答案: