I have this side bar

and I want an item to be activated by changing item color to white and icon to black when it's selected

This is what I have tried so far

Css Code

.sidebar li a {

  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  background: #76b852;
}
.sidebar li a:hover{
  background: #FFF;
}

.sidebar li a.active{
    background-color: #FFF;
  color: white;
}

Html code

 <li <?php if($currentFile=="dashboard.php"){?>class="active"<?php }?>>
                    <a href="dashboard.php">
                        <i class="material-icons">
                            <span class="material-icons">dashboard</span>
                        </i>
                        <span class="links_name">Dashboard</span>
                    </a>
                    <span class="tooltip">Dashboard</span>
                </li>

and seems the problem here

.sidebar li a.active{
background-color: #FFF; 
color: white;}

when I add l only without a, the activated items shows like this

I have 0 experience in web development hope someone helps me

CodePudding user response：

With this code:

<li <?php if($currentFile=="dashboard.php"){?>class="active"<?php }?>>

You add the active class to the li element.
Because of this, the CSS must also have the active class on the li element, not the a link.

.sidebar li.active a {
  background-color: #FFF;
  color: white;
}

You may need to add .sidebar li.active a:hover, .sidebar li.active a:active, depending.
But first let's fix the .active selector in the wrong spot.