javascript - 使用 Alpine JS 将鼠标悬停在下拉菜单上

Question

我想构建一个在鼠标悬停时显示并显示元素的菜单:
类别:
- 子类别1
- 子类别2
我设法做到了，但我的问题是，当我将鼠标悬停在菜单上并显示里面的元素并且我将鼠标从菜单本身移开时，元素不会隐藏。
这是我的代码:

<div x-data="{open: false}">
    <button @mouseover="open = true">Category</button>
    <div x-show="open" @mouseout="open = false" class="h-80 bg-red-900">
        <ul>
            <li>Sub-category 1</li>
            <li>Sub-category 2</li>
        </ul>
    </div>
</div>

Answer 1

使用 @mouseover.away = "open = false"在外部 div