多色切换场景下行星导航按钮CSS hover失效问题求助

核心问题是行内样式（通过element.style设置）的优先级高于CSS类，导致你的hover样式被覆盖。改用CSS类管理选中状态和行星专属颜色，就能让hover正常生效，同时简化状态切换逻辑。

具体步骤： #

1. 定义CSS类与变量
   给每个行星定义专属的颜色变量，配合通用的按钮状态类，避免重复写颜色值：

   /* 行星容器的激活类，切换行星时给父容器添加对应类 */
   .mercury-active {
     --planet-primary: #007bff;
     --planet-hover: #0056b3;
   }
   .venus-active {
     --planet-primary: #ffc107;
     --planet-hover: #e0a800;
   }
   /* 其余6个行星同理，各自定义对应的颜色变量 */
   
   /* 按钮选中状态 */
   .planet-btn.active {
     background-color: var(--planet-primary);
   }
   
   /* 按钮hover效果，现在能正常覆盖类样式 */
   .planet-btn:hover {
     background-color: var(--planet-hover);
   }
   

2. 修改JS状态切换逻辑
   不再直接操作行内样式，通过添加/移除类来控制状态：

   // 切换行星导航的逻辑
   function switchPlanet(planetName) {
     // 移除所有行星容器的激活类
     document.querySelectorAll('.planet-container').forEach(container => {
       container.classList.remove('mercury-active', 'venus-active', /* 其余行星类 */);
     });
     // 给当前行星容器添加对应激活类
     document.querySelector(`.${planetName}-container`).classList.add(`${planetName}-active`);
     // 重置按钮选中状态：清空所有按钮active类，给第一个按钮加上
     const currentBtns = document.querySelectorAll(`.${planetName}-container .planet-btn`);
     currentBtns.forEach(btn => btn.classList.remove('active'));
     currentBtns[0].classList.add('active');
   }
   
   // 按钮点击逻辑
   function handleBtnClick(e) {
     const targetBtn = e.target;
     // 清空当前行星下所有按钮的active类
     targetBtn.parentElement.querySelectorAll('.planet-btn').forEach(btn => btn.classList.remove('active'));
     // 给点击的按钮添加active类
     targetBtn.classList.add('active');
   }
   

3. 初始状态设置
   页面加载时，给默认选中的行星容器（比如水星）加上mercury-active类，同时给第一个按钮加上active类，也可以直接在HTML里写死初始类，减少JS初始化代码。

方案优势： #

• 彻底解决hover被行内样式覆盖的问题，纯CSS实现hover效果
• 类切换逻辑比操作data属性更简洁，切换行星时仅需处理父容器的类，无需逐个移除8个行星的属性
• 用CSS变量统一管理颜色，后续修改或新增行星颜色更高效

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