import { Meta } from '@storybook/addon-docs/blocks';

<Meta
    title="Utilities/onHover"
    summary="Mixin to apply hover styles only on devices that actually support hovering."
/>

# onHover

The `onHover` mixin applies hover styles only on devices that actually support hovering (desktops
with a mouse). A plain `:hover` rule also fires on touch devices — where the "hover" state sticks
after a tap — so use the mixin instead for custom interactive styles.

## styled-components

Import `onHover(content: string)` from `@preply/ds-web-core`:

```ts
import styled from 'styled-components';
import { onHover } from '@preply/ds-web-core';

export const MyComponent = styled.div`
    background: lightblue;

    ${onHover(`
        background: lightpink;
    `)}
`;
```

## Less

Import `hover.less` from `@preply/ds-web-core`:

```css
@import '@preply/ds-web-core/dist/generated/hover.less';

.MyComponent {
    background: lightblue;

    .onHover({
        background: lightpink;
    });
}
```

## SCSS (experimental)

SCSS support exists for the Next.js App Router, where Less is not supported. The API may change:

```css
@use '@preply/ds-web-core/dist/generated/hover' as *;

.MyComponent {
    background: lightblue;

    @include onHover {
        background: lightpink;
    }
}
```