---
title: "invalid-media-query"
description: "Reports a condition in style.media() that is not a media query, such as hover."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# invalid-media-query

This rule reports an argument of `style.media()` that is not a media condition.
`hover:` matches a hovered element, not a property of the device, so it cannot
become a query for `matchMedia()`. The argument is left out, and when no argument
remains, the query is `not all`.

## Reported

```tsx
style.media("hover");
```

> invalid-media-query: `hover` adds a condition that is not a media query
> 
> Example:1:14

## Fixed

```css
@custom-variant can-hover (@media (hover: hover));
```

```tsx
style.media("can-hover");
```

## How to fix

- To check whether an input device can hover, define a media variant for that
  capability, as in the example.
- To style an element while it is hovered, use `hover:` inside `style()`.
- To check the viewport or user preferences, use media variants such as `md` or
  `motion-safe`.
- `supports-*` and container queries are not media conditions either.

See [style.media()](/docs/macros/media#inputs).

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | deny |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/invalid-media-query/index.mdx