如何使Button内部的链接在悬停时更改颜色而不将鼠标悬停在链接上

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