如何在悬停下拉菜单时移除上一分类的border-bottom

方案一：纯CSS方案（用:has()选择器） #

不用写JS，直接靠CSS就能搞定。给你的样式表里加这么一段：

.menu-item:has(+ .menu-item:hover) {
  border-bottom: none;
}

为啥管用？ #

:has(+ .menu-item:hover) 意思是：如果当前这个.menu-item的下一个兄弟项正处于hover状态，就把当前项的底部边框去掉。正好对应你遇到的情况——当你悬停某个分类时，它前面那个分类的边框就会消失，不会盖在当前分类的子菜单顶部。

注意：这个选择器现在Chrome、Firefox 121以上、Safari 15.4以上都支持，要是需要兼容更老的浏览器，就看下面的JS方案。

方案二：JavaScript动态控制（全浏览器兼容） #

如果要照顾旧浏览器，用JS动态加/移除类就行：

第一步：先加个CSS类 #

.menu-item.no-border {
  border-bottom: none;
}

第二步：写JS逻辑 #

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  // 鼠标移上去时，给前一个分类加无边框类
  item.addEventListener('mouseenter', () => {
    const prevItem = item.previousElementSibling;
    if (prevItem) {
      prevItem.classList.add('no-border');
    }
  });

  // 鼠标移开时，把前一个分类的无边框类去掉
  item.addEventListener('mouseleave', () => {
    const prevItem = item.previousElementSibling;
    if (prevItem) {
      prevItem.classList.remove('no-border');
    }
  });
});

原理很简单 #

用previousElementSibling拿到当前hover项的前一个兄弟分类，通过添加/移除no-border类来控制边框显示，不管什么浏览器都能跑。

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