mouse()

The pointer position in px, in viewport coordinates or relative to the element.

Syntax

mouse(x | y, viewport | local?)

registry syntax: mouse(x | y [, viewport | local])

Parameters

axisx or yrequired

Which coordinate.

modeviewport (default) or localoptional

local measures from the top-left corner of the element’s border box.

Return value

A length in px. 0px before the first pointer move.

Example

.pad {  --x: mouse(x, local);  --y: mouse(y, local);}.dot {  translate: var(--x) var(--y);}

Behavior

• Updates at most once per frame, only for the axis that changed.
• Viewport mode is a shared source: one listener and one write per declaration, not per element.
• Inside a mutation of an :on() rule, mouse() is a snapshot of the event: mouse(x) is its client x, and mouse(x, local) is event(local-x), relative to the element the rule matched. There it needs a pointer or drag trigger.

Supported contexts

• Any value, and the expression of an :on() mutation (read once, at the event).

Limitations

• local does not update on scroll alone, and needs a layout read per element per frame.
• Pointer only: provide a non-pointer alternative.

Examples

• Mouse tracker · API examples, runs the real runtime

Related