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

<Meta title="Guides/Custom Components/StyledComponents/Hover" />

# StyledComponents: Hover

Import `onHover(content: string)` from `@preply/ds-web-core` and use the mixin to show hover only for **Desktops with mouse**:

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

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

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