Hover over dropdown with Alpine JS

i wanna build a menu that is shown on mouseover and displays elements: category: – sub-category1 – sub-category2

I managed to accomplish that, but my problem is that when i hover over the menu and it shows the elements inside and i move the mouse away from the menu itself, the elements dont hide.

Here is my code:

<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

use @mouseover.away = "open = false" on the outside div

Leave a Reply

Your email address will not be published. Required fields are marked *