Hover

type whileHover = VariantLabels | TargetAndTransition

type VariantLabels = string | string[]

type TargetAndTransition = {
  [key: string]: any
  transition?: Transition
  transitionEnd?: ResolvedValues
}

<motion.div whileHover={{ scale: 1.2 }} />

// With variants
const variants = {
  hover: {
    scale: 1.1,
    backgroundColor: "#f0f0f0"
  }
}

<motion.div
  variants={variants}
  whileHover="hover"
/>

type onHoverStart = (
  event: PointerEvent,
  info: EventInfo
) => void

interface EventInfo {
  point: { x: number; y: number }
}

<motion.div
  onHoverStart={(event, info) => {
    console.log('Hover starts at', info.point)
  }}
/>

type onHoverEnd = (
  event: PointerEvent,
  info: EventInfo
) => void

<motion.div
  onHoverEnd={(event, info) => {
    console.log('Hover ends at', info.point)
  }}
/>

<motion.button
  whileHover={{ scale: 1.1 }}
  onHoverStart={() => console.log('Button hovered')}
  onHoverEnd={() => console.log('Hover ended')}
>
  Hover me
</motion.button>

<motion.div
  whileHover={{
    scale: 1.2,
    transition: { duration: 0.3 }
  }}
>
  Hover with custom transition
</motion.div>

const variants = {
  initial: {
    scale: 1,
    backgroundColor: "#fff"
  },
  hover: {
    scale: 1.05,
    backgroundColor: "#f8f8f8",
    transition: {
      duration: 0.2
    }
  }
}

<motion.div
  variants={variants}
  initial="initial"
  whileHover="hover"
>
  Card with hover effect
</motion.div>