如何使按钮内的链接在悬停时更改颜色而不悬停在链接上

Question

我的链接在直接悬停在它上面时会改变颜色，但当我将鼠标悬停在按钮上而不是直接悬停在链接上时不会改变颜色

btn:hover{
color: black;
}

这不起作用。

a:hover{
color:black
}

这目前正在工作，但没有根据需要完成这项工作。

当我将鼠标悬停在按钮上时，如何让按钮更改链接的颜色？
如第一张图片所示。

Answer 1

可能您没有向<a>标签添加填充。它需要添加填充或宽度来定义要悬停的区域。如果您在 parent 中添加 padding <li>，因此您需要将鼠标悬停在 上<li>以更改<a>标签的颜色。

.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>