如何将导航栏hover的顶部线条移至页面最顶端？

Got it, let's fix this! The issue with your current border-top approach is that it's tied directly to the <li> element, so it'll only show up at the top of that list item—not the very top of the page. Here are two solid ways to get that full-page top line when hovering over your nav items:

方案一：使用CSS :has选择器（现代浏览器友好） #

这个方法纯CSS实现，不需要JS，适合支持现代浏览器的场景：

1. 添加顶部线条元素
   在页面的最开头（<body>标签内的第一个位置）添加一个专门用于显示线条的div：

<div class="top-hover-line"></div>

2. 设置线条的基础样式
   给这个div设置固定定位，默认隐藏（高度为0），并加上平滑过渡效果：

.top-hover-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #5CABD1;
  transition: height 0.2s ease; /* 让线条显示/隐藏更平滑 */
  z-index: 9999; /* 确保线条在所有内容上方 */
}

3. 触发hover效果
   利用CSS的:has选择器，当导航栏的任意<li>被hover时，显示顶部线条：

body:has(#liste li:hover) .top-hover-line {
  height: 3px;
}

方案二：使用JavaScript（兼容旧浏览器） #

如果需要兼容不支持:has选择器的旧浏览器，用JS监听hover事件更稳妥：

1. 同样添加顶部线条元素
   和方案一一样，先在页面顶部添加<div class="top-hover-line"></div>，并应用相同的基础CSS样式。

2. 编写JS监听事件
   给每个导航项添加鼠标进入和离开的监听，控制线条的显示与隐藏：

// 获取所有导航项和顶部线条元素
const navItems = document.querySelectorAll('#liste li');
const topLine = document.querySelector('.top-hover-line');

// 给每个导航项绑定事件
navItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    topLine.style.height = '3px';
  });
  item.addEventListener('mouseleave', () => {
    topLine.style.height = '0';
  });
});

最后，记得移除你原来给<li>设置的border-top样式，因为现在我们用单独的元素来实现顶部线条啦！

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