多客户主题项目：悬停激活态菜单项需保留active类样式

嘿，我明白你遇到的麻烦了——当用户悬停在已经处于激活态（active）的菜单项上时，原本的active样式不见了。这个问题通常要么是CSS优先级冲突，要么是JS事件不小心移除了active类，咱们一步步来排查解决：

1. 先检查CSS优先级：确保active+hover的样式被正确定义 #

很多时候，hover状态的CSS样式会覆盖active的样式，因为hover选择器的优先级和active是一样的，而如果hover的样式写在active后面，就会覆盖它。咱们可以直接给激活态的hover单独写样式，确保核心属性保留：

/* 基础激活态样式 */
.nav-item.active {
  background-color: var(--active-color); /* 这里可以是从数据库取到的主题色 */
  color: #fff;
  border-bottom: 2px solid var(--active-border-color);
}

/* 关键：给激活态的菜单项单独定义hover样式 */
.nav-item.active:hover {
  /* 你可以保留和active一致的背景色，或者稍作调整（比如加深/变浅） */
  background-color: var(--active-hover-color); 
  color: #fff; /* 保持文字颜色不变，维持激活态的识别度 */
  border-bottom: 2px solid var(--active-border-color); /* 保留激活态的底部边框 */
}

这样即使悬停在active项上，它的核心激活态样式（比如底部边框、文字颜色）也不会丢失，hover只是在这个基础上做微调。

2. 排查母版页的JS代码：是否误删了active类 #

如果你的JS在处理hover事件时，不小心移除了active类，那也会导致这个问题。比如有些开发者会在hover时重置元素的class列表，而不是只添加/移除hover类。

检查你的JS代码，确保hover事件只操作hover相关的类，而不影响active类：

// 错误示例：重置class会丢失active类
document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('mouseenter', function() {
    this.className = 'nav-item hover'; // 这里直接替换了所有类，包括active
  });
});

// 正确示例：只添加/移除hover类，保留原有类
document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('mouseenter', function() {
    this.classList.add('hover'); // 只加hover类
  });
  item.addEventListener('mouseleave', function() {
    this.classList.remove('hover'); // 只移除hover类
    // 额外保险：如果当前项应该是激活态，确保active类存在
    if (this.hasAttribute('data-active') || this.classList.contains('active')) {
      this.classList.add('active');
    }
  });
});

另外，如果你是用jQuery的hover()方法，也要注意不要用attr('class', ...)来设置类，而是用addClass()和removeClass()。

3. 额外提示：主题切换时的类同步 #

因为你的主题颜色是从数据库动态获取的，确保在切换主题时，active类的样式也被正确更新，并且hover时的动态样式也同步。比如可以把主题色存在CSS变量里，这样所有相关样式都能自动同步：

// 登录后从数据库获取主题色，设置CSS变量
const themeColors = {
  activeColor: '#xxxxxx', // 从SQL取到的颜色
  activeHoverColor: '#yyyyyy'
};
document.documentElement.style.setProperty('--active-color', themeColors.activeColor);
document.documentElement.style.setProperty('--active-hover-color', themeColors.activeHoverColor);

这样CSS里的变量就能自动应用，不用每次切换主题都重写所有样式。

按照上面的步骤排查，应该就能解决悬停激活态菜单项时丢失样式的问题啦！

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