CSS导航链接在悬停时不会更改

Question

为什么我的悬浮CSS不会影响网站中的链接？

.nav-link {
  font-size: 20px;
  padding: 10px;
  border-top: #A46FA6 1px solid;
  width: auto;
  color: white;
  text-decoration: none;
}

.nav-link :hover {
  background-color: #6D256F;
  text-decoration: underline;
}

<nav id="navbar">
  <header id="navbar-header"> Overview </header>
  <a class="nav-link" href="#Topic_1">Topic 1</a>
  <a class="nav-link" href="#Topic_2">Topic 2</a>
  <a class="nav-link" href="#Topic_3">Topic 3</a>
  <a class="nav-link" href="#Topic_4">Topic 4</a>
  <a class="nav-link" href="#Topic_5">Topic 5</a>
</nav>

Answer 1

：hover不得与您要描述的元素隔开。

.nav-link {
  font-size: 20px;
  padding: 10px;
  border-top: #A46FA6 1px solid;
  width: auto;
  color: white;
  text-decoration: none;
}

.nav-link:hover {
  background-color: #6D256F;
  text-decoration: underline;
}

<nav id="navbar">
  <header id="navbar-header"> Overview </header>
  <a class="nav-link" href="#Topic_1">Topic 1</a>
  <a class="nav-link" href="#Topic_2">Topic 2</a>
  <a class="nav-link" href="#Topic_3">Topic 3</a>
  <a class="nav-link" href="#Topic_4">Topic 4</a>
  <a class="nav-link" href="#Topic_5">Topic 5</a>
</nav>