'Change background color on hover/click and maintain that color when the button is active

So I'm trying to make this header switch its background color when hovered over and I want to make the background stay that color when the link is active. Could anyone help me?

<a href="<?= cn('statistics') ?>" aria-expanded="false" class="<?= (segment(1) == 'statistics') ? "active" : "" ?>" style='background-color:#222831;border: 2px solid white;border-radius: 20px;width: 97%;'>
    <div class="nav_icon_small">
      <i data-feather="home" style='color:#F16638'></i>
    </div>
    <div class="nav_title" style='color:#FFFFFF'>
      <span>Dashboard</span>
    </div>
  </a>
phphtmlcssbuttonbackground-color


Solution 1:[1]

I can see that you are using the active class. Which is good, but if ou are using inline styling, you styling is overwritten by your inline styling. It is called Cascading Inheritance.

more info in link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Flamefre

Related Questions