html - 如何限制悬停一次不应用于所有链接？

Question

我目前正在构建一个网站，但在我应用悬停 (CSS+HTML5) 时无法显示链接。如何停止悬停以立即应用于同一行上的所有链接？就像我希望悬停仅适用于指向的链接，而不是同时适用于所有链接。链接位于导航栏上。请帮助我。

这是我的程序的样子:

a:link {
  color: white;
  padding: 10px;
}

nav:hover {
  background-color: #ff3399;
}

<nav>
  <a href="/home/">HOME</a>
  <a href="/marchendise/">MARCHENDISE</a>
  <a href="/transportation/">TRANSPORTATION</a>
  <a href="/ciment/">CIMENT</a>
  <a href="/locations/">LOCATIONS</a>
  <a href="/laiterie/">LAITERIE</a>
  <a href="/contacts/">CONTACTS</a>
</nav>

Answer 1

您正在将背景应用于 nav悬停元素即nav:hover ，而不是<a> .

只需使用 a:hover

a:link {
  color: #000;
  padding: 0 10px;
}

a:hover {
  color: #fff;
  background-color: #ff3399;
}

<nav>
  <a href="/home/">HOME</a>
  <a href="/marchendise/">MARCHENDISE</a>
  <a href="/transportation/">TRANSPORTATION</a>
  <a href="/ciment/">CIMENT</a>
  <a href="/locations/">LOCATIONS</a>
  <a href="/laiterie/">LAITERIE</a>
  <a href="/contacts/">CONTACTS</a>
</nav>