如何正确处理鼠标事件与AlpineJS为我的菜单？

Question

我正在使用alpine.js和Tailwind开发一个超级下拉菜单组件。现在我遇到了一些困难，我不能让鼠标事件工作。下面是我的代码，红色块是下拉超级菜单。如您所见，当您移动产品菜单项上的光标时，将显示超级菜单。在此之后，如果您在超级菜单上将光标向下移动一点，则仍然会显示菜单。在此状态下，如果您从超级菜单中移出，则超级菜单将关闭。问题是，当您移动到“产品”菜单，然后将光标移到“* Pricing”菜单项时，仍然会显示下拉菜单，这是不正确的。当用户移出“产品”菜单时，如何使用alpine.js测试目标是超级下拉菜单还是其他菜单项(在本例中是关闭巨型下拉菜单)？

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div class="border-b border-gray-200 relative h-20 flex py-0 items-stretch" x-data="{isProdMenuOpen: false, isLearnMenuOpen: false}">
    <div class="flex container mx-auto items-center justify-between h-20"><img class="flex-none h-6" src="https://sitebulb.com/images/icons/logo.svg" />
        <ul class="flex items-center justify-between flex-none">
            <li class="h-20 border-b border-l border-r border-transparent mx-6 flex items-center relative" @mouseenter="isProdMenuOpen = true">
                <!--div.h-20.w-full.flex.items-center.border-b.border-transparent(class="hover:border-red")--><a class="font-semibold flex-none" href="">Product</a>
                <div class="h-full absolute -left-6 -right-6 top-0 border-r border-l border-gray-200">
                    <div class="w-full absolute bottom-0 bg-black z-100 inset-x-0" style="transform: translate(0px, 2px); height:4px;"></div>
                </div>
            </li>
            <li class="h-20 flex items-center mx-6"><a class="font-semibold flex-none" href="">Pricing</a></li>
            <li class="h-20 flex items-center mx-6"><a class="font-semibold flex-none" href="">About</a></li>

        </ul>
        <div class="flex items-center justify-between flex-none"><button class="bg-white rounded border px-3 py-2 text-sm font-medium border-gray-200">Login</button><button class="bg-white rounded bg-green-400 text-white text-sm font-medium px-3 py-2 ml-2 hover:bg-green-500">Free Trial</button></div>
    </div><!-- Popup Menu Items    -->
    <div class="flex flex-row items-start border-b border-gray-200 w-screen h-40 absolute left-0 top-20 bg-red-400" id="prodmenu" x-show="isProdMenuOpen" @mouseenter="isProdMenuOpen = true" @mouseleave="isProdMenuOpen = false"></div>
</div>

​

Answer 1

有一个解决方案是独立于阿尔卑斯山或Javascript的。在group上使用Tailwind的li类，使弹出成为组li的一个子类，并从li中移除相对位置，这样子div可以完全宽度，我相信您正在寻找并且完全由CSS控制。

在li上使用不同颜色的下划线时，需要进行一些模糊处理才能产生类似的效果--在本例中，我使用了一个边框和锚标记的相对位置来抵消边框的高度。此外，您还需要扩展您的变体，以便在下面的代码片段中在display中对group-hover进行操作，所以下面我只是使用该配置生成的类来伪造它。这里有一个尾风游戏，它显示了实际配置以及https://play.tailwindcss.com/EYY0alaQuB?file=config

​

.group:hover .group-hover\:flex {
  display: flex;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet" />
<div class="border-b border-gray-200 relative h-20 flex py-0 items-stretch">
  <div class="flex container mx-auto items-center justify-between h-20"><img class="flex-none h-6" src="https://sitebulb.com/images/icons/logo.svg" />
    <ul class="flex items-center justify-between flex-none">
      <li class="h-20 border-b-4 border-l border-r border-gray-200 px-6 flex items-center group" style="border-bottom: 4px solid black">
        <a class="font-semibold flex-none relative top-1" href="">Product</a>
        <!-- Popup Menu Items    -->
        <div class="hidden group-hover:flex flex-row items-start border-b border-gray-200 w-screen h-40 absolute left-0 top-20 bg-red-400" id="prodmenu"></div>
      </li>
      <li class="h-20 flex items-center mx-6 border-b-4 border-transparent"><a class="font-semibold flex-none relative top-1" href="">Pricing</a></li>
      <li class="h-20 flex items-center mx-6 border-b-4 border-transparent"><a class="font-semibold flex-none relative top-1" href="">About</a></li>

    </ul>
    <div class="flex items-center justify-between flex-none">
      <button class="bg-white rounded border px-3 py-2 text-sm font-medium border-gray-200">Login</button>
      <button class="rounded bg-green-400 text-white text-sm font-medium px-3 py-2 ml-2 hover:bg-green-500">Free Trial</button>
    </div>
  </div>
</div>

​