Mouse tracker
A dot that follows the pointer inside an area, moved with a transform.
Live previewreal runtime
Move the mouse over the grid, or drag a finger on a touch screen.
state
| name | value | previous | changes |
|---|---|---|---|
| Waiting for the preview to start. | |||
events
- Interact with the preview to record events.
How it works
- mouse()line 3The pointer position in px, in viewport coordinates or relative to the element.
mouse(x, local) and mouse(y, local) give the pointer position relative to an element. Here they move a dot and show the coordinates.
Native CSS alternative
None. CSS has :hover, but it cannot read the pointer position. Without Reactive CSS this is a pointermove listener.
Limitations
- Pointer only. There is no keyboard equivalent; the dot rests in the middle. Use pointer effects for decoration, never for content or controls.
- One listener: one
pointermovelistener for the whole page, updated at most once per frame. Inlocalmode, scrolling alone does not update the value. - Readout support: printing the numbers needs CSS typed arithmetic (
length / length). It works in the tested Chromium and WebKit engines; elsewhere the readout stays at “point here”, and the dot still moves.
Implementation
2 files · 8 linesstyle.cssreactive
/* ---- Reactive CSS -------------------------------------------------------------------------- *//* mouse(…, local): the pointer position measured from .pad's top-left corner, in px. */.tracker .pad { --x: mouse(x, local); --y: mouse(y, local); }.tracker .pad:hover .dot { translate: var(--x) var(--y); }.tracker .pad:hover .coords::after { counter-reset: x round(var(--x) / 1px) y round(var(--y) / 1px); /* native: px → number */ content: "x " counter(x) " y " counter(y);}mouse()Function · hover any red tokenThe pointer position in px, in viewport coordinates or relative to the element.Reference →
Source: the library's examples/api/mouse-tracker/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.
Next recommendedElement size →A card reads its own measured width, and its text follows.← All examples
Related
State history
A score that remembers its last value and which way it moved.
previous()direction():changed()