Javascript 带Alpinejs的超大菜单-Hover是一辆马车

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

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

任何见解都将不胜感激

将触发事件从

mouseover

更改为

mouseenter

。您遇到的问题是，会为父元素及其子元素触发

mouseover

见：

当使用定点设备（如鼠标或触控板）将光标移动到元素或其子元素上时，将在元素上触发mouseover事件

---

其中，

mouseenter

将触发一次。

将触发事件从

mouseeover

更改为

mouseenter

。您遇到的问题是，会为父元素及其子元素触发

mouseover

见：

当使用定点设备（如鼠标或触控板）将光标移动到元素或其子元素上时，将在元素上触发mouseover事件

---

其中，

mouseenter

将触发一次。

谢谢

mouseenter

是一个不错的选择，因为它将在鼠标悬停到下拉内容时保持其回车位置。其中as

mouseover

在子/下拉内容上不起作用。再次感谢，谢谢

mouseenter

是一个不错的选择，因为它将在鼠标悬停到下拉内容时保持其回车位置。其中as

mouseover

在子/下拉内容上不起作用。再次感谢。

<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">

                      <a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
                        <div class="flex md:h-full lg:flex-col">
                          <div class="flex-shrink-0">
                            <div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
                              <svg class="h-6 w-6" x-description="Heroicon name: chart-bar" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                              </svg>
                            </div>
                          </div>
                          <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                            <div>
                              <p class="text-base font-medium text-gray-900">
                                Analytics
                              </p>
                              <p class="mt-1 text-sm text-gray-500">
                                Get a better understanding of where your traffic is coming from.
                              </p>
                            </div>
                            <p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
                          </div>
                        </div>
                      </a>

                      <a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
                        <div class="flex md:h-full lg:flex-col">
                          <div class="flex-shrink-0">
                            <div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
                              <svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
                              </svg>
                            </div>
                          </div>
                          <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                            <div>
                              <p class="text-base font-medium text-gray-900">
                                Engagement
                              </p>
                              <p class="mt-1 text-sm text-gray-500">
                                Speak directly to your customers in a more meaningful way.
                              </p>
                            </div>
                            <p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
                          </div>
                        </div>
                      </a>

                      <a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
                        <div class="flex md:h-full lg:flex-col">
                          <div class="flex-shrink-0">
                            <div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
                              <svg class="h-6 w-6" x-description="Heroicon name: shield-check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                              </svg>
                            </div>
                          </div>
                          <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                            <div>
                              <p class="text-base font-medium text-gray-900">
                                Security
                              </p>
                              <p class="mt-1 text-sm text-gray-500">
                                Your customers' data will be safe and secure.
                              </p>
                            </div>
                            <p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
                          </div>
                        </div>
                      </a>

                      <a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
                        <div class="flex md:h-full lg:flex-col">
                          <div class="flex-shrink-0">
                            <div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
                              <svg class="h-6 w-6" x-description="Heroicon name: view-grid" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                              </svg>
                            </div>
                          </div>
                          <div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
                            <div>
                              <p class="text-base font-medium text-gray-900">
                                Integrations
                              </p>
                              <p class="mt-1 text-sm text-gray-500">
                                Connect with third-party tools that you're already using.
                              </p>
                            </div>
                            <p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
                          </div>
                        </div>
                      </a>

                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>
            </li>
            <li class="md:hidden lg:inline-block">
              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>
            </li>
            <li class="md:hidden">
              <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="md:hidden lg:inline-block">
              <a href="#" class="block p-4 text-blue-100 hover:bg-blue-900 transition duration-500">LINK</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>