alpinejs @mouseover not working correctly-CodePudding

I want to trigger a dropdown menu via hover so use @mouseover. But when the cursor places between text and chevron, dropdown becomes hide. I use mouseover with a tag so it should contain text and chevron, shouldn't it?

here's my code

<header  x-data="{ dropdown: '' }">
    <nav >
        <div >
            <nav >
                <a @mouseover="dropdown = dropdown === 'open' ? '' : 'open'" >
                    <span  :>{{ __('test1') }}</span> <span ></span>
                </a>

what is the prolem?

CodePudding user response：

To fix this, we need to embed the two <span> elements into a <div> where we add the pointer-events-none class (assuming you are using TailwindCSS) to disable the pointer events of the child elements. Furthermore we also add the @mouseleave event to change the open state.

<a @mouseover="dropdown = 'open'"
   @mouseleave="dropdown = ''" 
   >
    <div >
      <span  :>{{ __('test1') }}</span>
      <span ></span>
    <div>
</a>