How To Add Hover Styles

import { ModalDoNotClose } from '@/demos/ModalDoNotClose.demo'; import { Layout } from '@/layout';

export const meta = { title: 'How can I add hover styles to an element?', description: 'Learn how to add hover classes to an element with CSS modules, &:hover or @mixin hover', slug: 'how-to-add-hover-styles', category: 'styles', tags: ['hover', 'before', 'after', 'css', '@mixin hover'], created_at: 'December 1, 2023', last_updated_at: 'December 26, 2023', };

export default Layout(meta);

&:hover

The simplest way to add :hover styles to an element is to use the & selector:

// Element.module.css
.element {
  &:hover {
    background-color: red;
  }
}

Then import the styles into your component:

import { Box } from '@mantine/core';
import styles from './Element.module.css';

export const Element = () => {
  return <Box className={styles.element}>Element</Box>;
};

@mixin hover

If you have postcss-preset-mantine in your project, you can use @mixin hover to add hover styles. Unlike &:hover, @mixin hover will also add styles for touch devices.

// Import the css file in your component the same way as in &:hover example
.demo {
  @mixin hover {
    color: orange;
  }
}

The code above will be transformed into:

@media (hover: hover) {
  .demo:hover {
    color: orange;
  }
}

@media (hover: none) {
  .demo:active {
    color: orange;
  }
}

Is there a way to add hover styles inline in JSX?

Mantine does not provide a way to add hover styles inline in JSX as a library feature. However, in your project you can use any third-party styling library that supports inline styles, for example styled-components or emotion.