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.

<nav class="navbar shadow-1 airforce dark-2">
  <a href="#" class="navbar-brand">Axentix</a>
  <div class="navbar-menu ml-auto hover-bg-dark">
    <a class="navbar-link active" href="#">Link</a>
    <a class="navbar-link" href="#">Link</a>
    <a class="navbar-link" href="#">Link</a>
  </div>
</nav>

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. 

<nav class="navbar shadow-1 airforce dark-2">
  <a href="#" class="navbar-brand">Axentix</a>
  <div class="navbar-menu ml-auto hover-text-dark text-grey text-light-2">
    <a class="navbar-link active" href="#">Link</a>
    <a class="navbar-link" href="#">Link</a>
    <a class="navbar-link" href="#">Link</a>
  </div>
</nav>

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.