如何实现导航栏按钮下划线每次hover时切换不同颜色？

核心实现逻辑 #

• 利用CSS伪元素::after为导航链接生成下划线，通过过渡动画实现hover时的展开效果
• 通过JavaScript维护颜色索引，每次hover触发时切换到下一个预设颜色，循环遍历4种目标颜色
• 使用CSS变量关联伪元素颜色，简化JS对样式的控制

完整代码示例 #

HTML

<div class="topnav" id="centered_nav">
  <a href="#" title="Home">Home</a>
  <a href="#" title="Services">Services</a>
  <a href="#" title="About">About</a>
  <a href="#" title="Contact">Contact</a>
</div>

CSS

.topnav {
  overflow: hidden;
  text-align: center;
  z-index: 6;
  background-color: #222; /* 添加背景色增强视觉对比 */
}

.topnav a {
  display: inline-block;
  margin-right: -4px;
  color: #fff;
  padding: 22px 22px;
  text-decoration: none;
  font-size: 18px;
  z-index: 9;
  transition: color 300ms;
  letter-spacing: 1px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  position: relative; /* 为伪元素定位提供基准 */
}

.topnav a:hover {
  color: #8F8F8F;
}

/* 下划线样式定义 */
.topnav a::after {
  content: '';
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--underline-color, #74B087); /* 使用CSS变量，默认颜色 */
  transition: width 300ms, background-color 300ms; /* 宽度和颜色切换都添加过渡动画 */
}

.topnav a:hover::after {
  width: 100%; /* hover时展开下划线 */
}

JavaScript

// 定义4种需要切换的下划线颜色
const colors = ["#74B087", "#DE7300", "#E8C547", "#A85342"];
let colorIndex = 0;

// 获取所有导航链接元素
const navLinks = document.querySelectorAll('.topnav a');

// 为每个链接绑定hover事件
navLinks.forEach(link => {
  link.addEventListener('mouseover', function() {
    // 更新颜色索引，取模实现循环切换
    colorIndex = (colorIndex + 1) % colors.length;
    // 设置当前链接的CSS变量，修改下划线颜色
    this.style.setProperty('--underline-color', colors[colorIndex]);
  });
});

关键说明 #

1. 下划线生成：通过::after伪元素创建下划线，避免修改HTML结构，初始宽度为0，hover时展开为100%，配合过渡动画实现平滑效果
2. 颜色切换逻辑：用colorIndex记录当前颜色位置，每次hover时递增并对颜色数组长度取模，实现4种颜色循环切换
3. 样式控制：使用CSS变量--underline-color关联伪元素的背景色，JS只需修改该变量即可控制下划线颜色，无需直接操作伪元素（伪元素无法通过JS直接获取）

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