Hover
Use our different classes to change your component hover effect.
The default hover effect is light and is made for the majority of the color palette.
Background hover
Use the .hover-bg-dark class to get the appropriate hover effect on a dark menu.
Text hover
Use the .hover-text-dark class to get the appropriate hover effect on a dark menu.
You have to manually set a default text color like text-grey text-light-2 in this example.
Hover class list
| Class name | Description |
|---|---|
.hover-bg |
Set the hover background color for a light colored element. |
.hover-bg-dark |
Set the hover background color for a dark colored element. |
.hover-text |
Set the hover text color for a light colored element. |
.hover-text-dark |
Set the hover text color for a dark colored element. |
Styling
| CSS Variable | Default value | Description |
|---|---|---|
--ax-hover-background
|
rgba(0, 0, 0, 0.07) | Hover background color. |
--ax-hover-background-dark
|
rgba(255, 255, 255, 0.1) | Hover background color for dark elements. |
--ax-hover-collapsible-background
|
rgba(0, 0, 0, 0.04) | Hover background color for sidenav collapsibles. |
--ax-hover-collapsible-background-dark
|
rgba(255, 255, 255, 0.06) | Hover background color for dark sidenav collapsibles. |
--ax-hover-text-color
|
#000 | Text color on hover. |
--ax-hover-text-color-dark
|
#fff | Text color on hover for dark elements. |
