hover

Motion's hover function detects hover gestures, firing events when they start and end.

For legacy reasons, browsers emulate hover events from touch devices, which can lead to "stuck" UIs and other unwanted artefacts/behaviours. hover filters these events out.

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

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

hover is also:

• Clean: Automatically manages event listeners

• Simple: Accepts Elements or CSS selectors for attaching multiple listeners

• Lazy: Attaches only the listeners needed

It can be used to start and stop animations:

hover("li", ({ currentTarget }) => {
  const animation = animate(currentTarget, { rotate: 360 })

  return () => animation.stop()
})