Alpinejs 的超级菜单 - 悬停是越野车

Question

我正在尝试使用 Tailwind CSS 和 Alpinejs 创建一个在悬停时触发的超级菜单。我有点让它工作，但它真的有问题。

我尝试将 x-on:mouseleave 添加到不同的元素，但它会不断闪烁或仅在离开某些区域时才消失。所以它要么在菜单下方移动时消失，要么在菜单上方移动时消失，反之亦然。

任何见解将不胜感激！

https://codepen.io/kennyk3/pen/yLJmzYJ

<div class="bg-blue-800 hidden md:block">

  <div class="max-w-screen-xl mx-auto">

    <nav class="flex items-center justify-between flex-wrap">

      <div class="w-full block flex-grow md:flex md:items-center md:w-auto">

        <div class="font-bold md:flex-grow">

          <ul class="flex justify-between">

            <li>

              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>

            </li>

            <li>

              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>

            </li>

            <li>

              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>

            </li>

            <li>

              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>

            </li>

            <li class="group hover:bg-white">

              <div x-data="{ resourcesMenu: false }" x-on:mouseover="resourcesMenu = !resourcesMenu" x-on:mouseleave="resourcesMenu = !resourcesMenu">

                <a href="#" class="block p-4 text-orange-400 group-hover:text-blue-900 transition duration-500">MEGA MENU</a>

                <div x-show="resourcesMenu" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1" class="absolute inset-x-0 transform shadow-lg -mt-1 z-10">

                  <div class="bg-white">

                    <div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">

Answer 1

将您的触发事件从 更改mouseover为mouseenter。您遇到的问题是mouseover针对父元素及其子元素触发的。当使用定点设备（例如鼠标或触控板）将光标移动到元素或其子元素之一上时，将在元素上触发 mouseover 事件。Wheresmouseenter会被触发一次。