Chapter 70: hover()

Core Idea

The hover() function can trigger functions as hover gestures start and end.

Key Concepts

• Import: hover can be imported into your project via "motion":
• Hover start: hover can detect hover gestures on either an Element/array of elements:
• Hover end: The hover start function can optionally return a callback.
• Cancelling gesture detection: hover returns a function that
• passive: Default: true
• once: Default: false
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

hover(".button", (element) => {
  console.log("hover started on", element)

  return () => console.log("hover end")
})

• What it demonstrates: Core usage pattern for hover().

Key Takeaways

1. Clean: Automatically manages event listeners.
2. Convenient: Accepts either elements or CSS selectors for attaching multiple gestures at on.
3. Lazy: Attaches only the event listeners needed.

Connects To

• press(): related Motion doc page.
• inView: related Motion doc page.
• animate(): related Motion doc page.
• Hover example & tutorial for JavaScript: related Motion doc page.