Vue/Nuxt - 从子元素触发鼠标离开答案

【问题标题】：Vue/Nuxt - Mouseleave triggers from child elementVue/Nuxt - 从子元素触发鼠标离开
【发布时间】：2021-02-12 10:07:03
【问题描述】：

目前正在尝试构建我网站的一部分，当将文本悬停在其下方时，会出现一个模式框（因此人们可以将鼠标悬停在其上）。这将使模态保持存在，直到他们将鼠标移到此之外。

我面临的问题是，一旦我的鼠标从文本移动到模态框，模型就会消失（因为似乎触发了 mouseleave 事件）。

<div class="relative" @mouseover="guestDropdown = true" @mouseout="guestDropdown = false">
  <p class="flex items-center justify-between mt-4 text-xs font-medium leading-4 text-gray-600">
    <span>Input:</span>
    <span class="cursor-pointer text-deepskyblue-500">Hover</span>
  </p>
  <div class="absolute right-0 z-20 mt-2 -mx-3 bg-white border rounded" v-show="guestDropdown">
    <p class="px-3 py-2">Some modal!</p>
  </div>
</div>

谢谢。

【问题讨论】：

标签： vue.js modal-dialog nuxt.js

【解决方案1】：

很难说没有更多代码和可重现的示例，但 mouseover/mouseout trigger on descendants 在这种情况下可能是您不想要的。您可以改用mouseenter/mouseleave - 这些不会在后代上触发并且不会冒泡......

【讨论】：

嘿，抱歉！单击here 获取可重现的示例。
好的，我看到你现在切换到使用mouseenter/mouseleave 并且它似乎工作得很好（FF 81） - 当文本悬停时，弹出窗口出现并且仅在鼠标离开文本或弹出窗口时关闭。这不是你想要的吗？