CSS导航栏悬停交互需求：首页按钮与其他按钮背景切换

你可以通过CSS组合选择器精准控制交互逻辑，以下是实现目标效果的完整代码和说明：

修改后的CSS代码 #

.topnav {
  overflow: hidden;
  background-color: #333;
}
.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  color: white;
  transition: background-color 0.2s; /* 可选：添加过渡动画让切换更平滑 */
}
/* 默认状态下Home按钮（active类）背景设为绿色 */
.topnav a.active {
  background-color: green;
}
/* 鼠标悬停导航栏容器时，重置Home按钮的绿色背景 */
.topnav:hover a.active {
  background-color: #333;
}
/* 任何按钮被悬停时，背景变为绿色 */
.topnav a:hover {
  background-color: green;
}
/* 单独指定：悬停Home按钮时，强制保持绿色背景 */
.topnav a.active:hover {
  background-color: green;
}

对应HTML代码（无需修改原有结构） #

<div class="topnav">
  <a class="active" href="#" onclick=replace('Home')>Home</a>
  <a href="#" onclick=replace('News')>News</a>
  <a href="#" onclick=replace('Contact')>Contact</a>
  <a href="#" onclick=replace('About')>About</a>
</div>

逻辑说明 #

1. 先给.active类设置绿色背景，实现Home按钮的默认高亮状态；
2. 利用.topnav:hover a.active规则：当鼠标进入导航栏容器时，将Home按钮的背景重置为导航栏默认深色；
3. 保留.topnav a:hover确保所有被悬停的按钮都会变成绿色；
4. 最后用.topnav a.active:hover覆盖第二步的规则，保证悬停Home按钮时，它依然保持绿色。

这套规则完全匹配你要的交互效果：

• 默认状态：Home按钮绿色，其余按钮深色；
• 悬停其他按钮：Home按钮变回深色，当前悬停按钮变绿；
• 悬停Home按钮：Home按钮保持绿色不变。

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