Hover on nested element removes "hovered" styles

[Fifciu]

System info

---

• Operating System: Darwin
• Node Version: v18.17.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@9.6.7
• Builder: -
• User Config: extends, app, components, vite, runtimeConfig, nitro, image, gtag, modules
• Runtime Modules: @vee-validate/nuxt@4.12.8, @vueuse/nuxt@10.9.0, @nuxtjs/google-fonts@3.2.0, ~/modules/bg-settings, nuxt-gtag@2.0.5, @vueuse/motion/nuxt@2.1.0
• Build Modules: -

---

Reproduction

1. Create the following component:

<div class="flex flex-col bg-white box-shadow" 
    v-motion 
    :initial="{
      opacity: 0,
      y: 0,
      scale: 0
    }" 
    :visibleOnce="{
      opacity: 1,
      y: 0,
      scale: 1
    }"
    :duration="2300" 
    :hovered="{
      scale: 1.03
    }">
    <img src="https://t3.ftcdn.net/jpg/05/85/86/44/360_F_585864419_kgIYUcDQ0yiLOCo1aRjeu7kRxndcoitz.jpg" />
    <div class="px-2 py-4 flex flex-col gap-2 md:px-4 h-full" id="bugged-childs">
      <h3 class="font-secondary font-medium text-2xl text-neutral-800 hyphens-auto break-words">Lorem ipsum dolor</h3>
      <div class="font-secondary font-light text-base text-neutral-800 flex-auto">
        <p class="line-clamp-6">Lorem ipsum dolor sit amet consectetur. Amet at aenean mauris lacinia sociis habitasse
          at sem. Nisl egestas netus elit vivamus felis odio massa at ultrices. Pharetra sed pulvinar lectus tempor. Sed
          amet natoque nulla tellus.</p>
      </div>
    </div>
  </div>

2. Play with "hovered" part. When you over on image or padding of main div then it works perfectly. But if you hover on child of #bugged-childs (h3, div, div>p) then hovered styles are removed.

Describe the bug

Hovered styles are removed when we hover on grandchild and it's descendants.

Additional context

No response

Logs

No response

[Fifciu]

I suspect the problem is caused by event bubbling. I think these handlers

motion/src/features/eventListeners.ts

Line 48 in 5e2346a

useEventListener(target as any, 'mouseenter', () => (hovered.value = true))

catches events from child and sets hover to false.

As a temporary workaround I set @mouseout.stop @mouseleave.stop on both img and #bugged-childs and it solves the problem.

[gimwachan-git]

I set child to pointer-events: none; and it worked.

[Fifciu]

I am pretty sure it's possible to solve without workarounds, so we still can have pointer events inside.

[BobbieGoede]

This behaviour is caused by this:

motion/src/features/eventListeners.ts

Lines 53 to 56 in 5e2346a

	useEventListener(target as any, 'mouseout', () => {
	hovered.value = false
	tapped.value = false
	})

I wonder if there is any use case for triggering this on mouseout, which also triggers whenever mouse hovers over child elements? If not, we can probably remove this and only handle this on mouseleave.