[ @sdxc/u/state ]

hover

Sugar over when("&:hover", input).

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { hover } from "@sdxc/u/state";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.hover(u.bg("brand.tint"))`	`css({ "&:hover": { backgroundColor: "..." } })`

Examples

Basic example

Wrap utilities in hover() to apply them only while the pointer is over the element. Hover the button to darken its background:

<button
	type="button"
	mix={[
		bg("brand.solid"),
		fg("brand.onSolid"),
		hover(bg("color.brand.800")),
		transition("background-color"),
		cursor("pointer"),
		...,
	]}
>
	Save changes
</button>

Raising a card

Any utility works inside hover(), like a deeper shadow(). Hover the card to lift it off the page:

Weekly report

hover(shadow("xl"))

<article mix={[shadow("sm"), hover(shadow("xl")), transition("box-shadow"), ...]}>
	<h3 mix={[text("base"), weight("semibold")]}>Weekly report</h3>
	<p mix={[...]}>hover(shadow("xl"))</p>
</article>

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.hover(u.bg("brand.tint")))

Signature

u.hover(input: UtilityInput<Node>)