# hover

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

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

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

## 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:

```tsx
<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:

```tsx
<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.

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

## Signature

```ts
u.hover(input: UtilityInput<Node>)
```