如何将导航栏列表项hover时的红色下划线移至header底部？

DevOps 小满

2026-8-9

实现方法

核心思路

把原来列表项hover时的下划线，替换成一个固定在header底部的动态元素，通过监听列表项的hover事件，动态调整这个元素的位置和宽度，使其与当前hover的列表项对应。

具体步骤及代码修改

调整header定位，预留下划线空间
修改header的CSS，设置相对定位并给底部留出下划线高度：

header {
  position: relative;
  padding-bottom: 2px; /* 与下划线高度保持一致 */
  /* 保留原有背景、内边距等样式 */
}

移除列表项原有的下划线样式
删除或注释掉列表项hover状态下的底部边框：
```
nav ul li:hover {
  /* 移除 border-bottom: 2px solid red; */
}
```

添加header底部的下划线伪元素
用伪元素创建默认隐藏的下划线，通过CSS变量控制位置和宽度：

header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--underline-left, 0);
  width: var(--underline-width, 0);
  height: 2px;
  background-color: red;
  transition: all 0.3s ease; /* 平滑过渡动画 */
}

用JavaScript动态控制下划线位置
监听每个列表项的hover事件，获取元素的位置和宽度，设置对应的CSS变量：

const navItems = document.querySelectorAll('nav ul li');
const header = document.querySelector('header');

navItems.forEach(item => {
  // 鼠标移入时设置下划线的位置和宽度
  item.addEventListener('mouseenter', () => {
    const { offsetLeft, offsetWidth } = item;
    header.style.setProperty('--underline-left', `${offsetLeft}px`);
    header.style.setProperty('--underline-width', `${offsetWidth}px`);
  });

  // 鼠标移出时隐藏下划线
  item.addEventListener('mouseleave', () => {
    header.style.setProperty('--underline-width', '0');
  });
});