alpinejs @mouseover 无法正常工作

Question

我想通过悬停触发下拉菜单，所以使用@mouseover。但是当光标位于文本和 V 形之间时，下拉列表变为隐藏。我将 mouseover 与标签一起使用，所以它应该包含文本和 V 形，不是吗？

这是我的代码

<header class="relative z-50" x-data="{ dropdown: '' }">
    <nav class="overflow-hidden z-50">
        <div class="container space-x-14 py-7 desktop:justify-start flex items-center z-50">
            <nav class="space-x-14">
                <a @mouseover="dropdown = dropdown === 'open' ? '' : 'open'" class="cursor-pointer font-semibold">
                    <span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span> <span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
                </a>

问题是什么？

Answer 1

为了解决这个问题，我们需要将两个 <span> 元素嵌入到一个 <div> 中，我们在其中添加 pointer-events-none class（假设您使用的是 TailwindCSS）禁用子元素的指针事件。此外，我们还添加了 @mouseleave 事件来更改打开状态。

<a @mouseover="dropdown = 'open'"
   @mouseleave="dropdown = ''" 
   class="cursor-pointer font-semibold">
    <div class="pointer-events-none">
      <span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span>
      <span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
    <div>
</a>

alpinejs @mouseover 无法正常工作

alpinejs @mouseover not working correctly

laravel

alpine.js