如何让导航栏hover效果仅作用于单个链接而非全部？

嘿，我明白你现在遇到的问题了——导航栏里的所有链接会一起触发hover效果，这是因为你当前的CSS是给整个nav容器设置hover样式，而不是针对单个<a>标签。咱们来快速调整一下：

问题根源 #

你写的nav:hover { background-color: #ff3399; }会让整个导航栏区域在鼠标悬停时变色，不管你指向哪个链接，只要鼠标碰到导航栏的任何位置，整个容器都会触发这个样式，看起来就像所有链接一起变了色。

解决方案 #

把hover的目标改成nav a:hover，这样就只会作用于鼠标当前指向的那个链接了。修改后的CSS代码如下：

a:link { 
  color: white; 
  padding: 10px; 
} 
nav a:hover { 
  background-color: #ff3399; 
}

完整代码示例 #

HTML部分不需要改动，保持你原来的结构即可：

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

调整之后，当你把鼠标放到某个链接上时，只有那个链接会显示#ff3399的背景色，其他链接完全不受影响。如果想让hover效果更顺滑，还可以给链接加个过渡动画：

a:link { 
  color: white; 
  padding: 10px; 
  transition: background-color 0.3s ease; /* 添加平滑过渡 */
} 
nav a:hover { 
  background-color: #ff3399; 
}

内容的提问来源于stack exchange，提问作者Bienfait Kirivita