How to make list item text hover color work correctly when it contains an anchor?-CodePudding

I have this html code and the nav has a red background with black text, and when you hover the text runs red and the background blue-ish. The thing is that the skins list item that has the anchor doesn't show the black text, and is always red, and only readable when you hover and the background turns darker. I tried moving the class to inside the anchor and that works but it only changes to red when you hover on the actual text, and not the list item.

If anyone can help me I would appreciate it!

a {
  text-decoration: none;
  color: hsl(358, 100%, 65%);
}

#skins {
  color: black;
}

#skins:hover {
  color: hsl(358, 100%, 65%);
}

<nav >
  <ul>
    <li id="skins"><a href="index.html">Skins</a></li>
    <li>Sobre Valorant</li>
    <li>Sobre Riot</li>
    <li>Ubicacion</li>
  </ul>
</nav>

CodePudding user response：

Add the red text on :hover then you can set text-decoration: none; with color: initial on your a element.

a {
  color: initial;
  text-decoration: none;
}

a:hover {
  color: hsl(358, 100%, 65%);
}

<nav >
  <ul>
    <li id="skins"><a href="index.html">Skins</a></li>
    <li>Sobre Valorant</li>
    <li>Sobre Riot</li>
    <li>Ubicacion</li>
  </ul>
</nav>

CodePudding user response：

It's because the text is inside <a> not <li> so use :

#skins a {
   /*your code*/
}