How to change button text color on hover HTML

Question

I have a button that needs to change color and text color when hovered over. I figured out how to change color, but how can I change the text color when I hover over the entire button not just the text?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Exercise 5</title>
    <style>
        body {
            background-color: lightblue;
        }

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


        #buttons li{
            background-color: blue;
            color: white;
            border-radius: 30px 66px 9px 66px;
            border-color: violet violet orange yellow;
            border-style: solid;
            border-width: 5px 10px 20px 30px;
            box-shadow: -15px 5px 20px 5px black; /*1px left right, 2px up down */
            padding: 30px 32px;
            text-align: center;
            display: inline;
            font-size: 20px;
          
        }

      #buttons li:hover{
        background-color: yellow;
            border-color: blue;
        text-decoration-color: black;
        
      }
      
     
      
      
    
      

    </style>
</head>

<body>


    <ul id="buttons">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>




</body>

</html>

Thank you in advance, because I know it's probably simple but I'm having a really hard time.

Answer 1

You need to target the <a> element

#buttons li:hover a {
  color: #000;
}

Answer 2

#buttons li:hover a {
    background-color: yellow;
    border-color: blue;
    text-decoration-color: black;
    color: black;
  }

How to change button text color on hover HTML

Question

2 answers

solution1
2 ACCPTED 2020-12-10 21:08:41

solution2
0 2020-12-10 21:16:53

How to change button text color on hover HTML

Question

2 answers

solution1 2 ACCPTED 2020-12-10 21:08:41

solution2 0 2020-12-10 21:16:53

solution1
2 ACCPTED 2020-12-10 21:08:41

solution2
0 2020-12-10 21:16:53