How to make the link inside Button change color on hover without hovering over link

Question

My link changes color on hovering over it directly but does not change color when I hover over the button and not the link directly

btn:hover{
color: black;
}

This does not work.

a:hover{
color:black
}

This is working currently but does not do the job as needed.

How do I make the button change the color of the link when I hover over it?
As seen in the first image.

Answer 1

Probably you didn't add padding to the <a> tag. it need to add padding or width to define a area to hover over. if you add padding in parent <li>, therefore you need to hover over the <li> to change the color of the <a> tag.

.nav{overflow:hidden}
.nav ul{list-style:none; text-align:center;}
.nav ul li{display:inline-block; vertical-align:top}
.nav ul li a{display:block; padding:10px 20px; background-color: silver; color: black}
.nav ul li a:hover{background-color: darkgrey; color: white}

<div class="nav">
  <ul>
    <li><a href="#!">Link</a></li>
    <li><a href="#!">Link</a></li>
    <li><a href="#!">Link</a></li>
    <li><a href="#!">Link</a></li>
  </ul>
</div>

Answer 2

btn is wrong try button selector like below.

button:hover{
color: black;
}