How to apply a hover effect on each direct child individually in CSS?-CodePudding

I am trying to create a tab bar with a hover effects on its direct children, therefore i have the following code with the intent of applying an effect on each element inside the list individually, but idoesn't work.

HTML code :

   <!-- navigation -->
        <div>
          <nav>
            <ul >
              <li >
                <a  href="#"
                  ><span>01</span>Active</a
                >
              </li>
              <li>
                <a  href="#"
                  ><span>02</span>Hovered</a
                >
              </li>
              <li>
                <a  href="#"
                  ><span>03</span>Idle</a
                >
              </li>
            </ul>
          </nav>
        </div>

CSS code :

.underline-indicators > * {
  padding: var(--underline-gap, 1rem) 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
}

.underline-indicators > *:hover,
.underline-indicators > *:focus {
  border-color: hsl(var(--clr-white) / 0.5);
}

.underline-indicators > .active {
  border-color: hsl(var(--clr-white) / 1);
}

is it possible to apply this effect and if yes what is the optimal way to do it?

Providing that when i replace *:hover with li:hover it works just fine, but i want to use * so i can reuse the same style on different parts of my code.

CodePudding user response：

Why you don't set a unique ID for each element that you want to put hover on it?

CodePudding user response：

Can you see the expected effect?

CodePudding user response：

<style>
.underline-indicators {
    list-style:none;
}

.underline-indicators li > *{
  padding: var(--underline-gap, 1rem) 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
  color:green;
}

.underline-indicators *:hover,
.underline-indicators *:focus {
  border-color: hsl(var(--clr-white) / 0.5);
}
.underline-indicators .active {
    border-color: hsl(var(--clr-white) / 1);
}
</style>

Try This CSS CODE

CodePudding user response：

Its because how you have used the var(). Try using just normal hsl values, it will work.