JS设置内联样式导致导航CSS hover动画失效问题求解

你的判断完全正确：JS直接通过element.style写入的内联样式优先级高于CSS伪类:hover的规则，自动收回逻辑给nav写死height: 10px的内联样式后，CSS里的hover样式无法覆盖内联规则，就会出现hover失效的问题。

核心逻辑是放弃用JS直接写内联样式控制高度，改用CSS类控制临时弹出状态，动画结束后清除临时类，把样式控制权完全交还给CSS。

第一步：调整CSS规则 #

把过渡、基础高度、hover高度、临时弹出高度都统一放到CSS里管理，不要用JS写样式：

#nav {
  /* 原有定位样式保留，比如position: fixed; bottom: 0; left: 0; width: 100% 等 */
  height: 10px; /* 初始收起状态高度 */
  transition: all 1s; /* 统一在这里配置过渡效果，不需要JS单独设置 */
}

/* hover展开状态 */
#nav:hover {
  height: 50px;
}

/* 按钮触发的临时弹出状态类 */
#nav.temp-pop {
  height: 50px;
}

第二步：改写JS逻辑 #

把原来直接修改style.height的逻辑换成增删CSS类，原来单独写的navHover函数可以直接删掉，过渡已经在CSS里配置完成不需要JS额外处理：

// 菜单按钮点击逻辑
const openNav = function () {
  const nav = document.getElementById("nav");
  // 添加临时弹出类，导航上滑展开
  nav.classList.add("temp-pop");
  console.log("to 50px");

  setTimeout(function () {
    // 移除临时类，导航自动收回，没有内联样式残留，hover规则正常生效
    nav.classList.remove("temp-pop");
    console.log("to 10px");
  }, 600);
};

可选优化（更稳定） #

如果担心写死600ms的定时和CSS过渡时长不匹配、不同设备渲染速度差异导致动画错位，可以改用监听transitionend事件来触发收回后的类移除，不需要手动写死延迟时间：

const openNav = function () {
  const nav = document.getElementById("nav");
  
  // 监听展开动画结束
  const handlePopEnd = () => {
    // 等展开停留0.5秒后移除临时类收回
    setTimeout(() => {
      nav.classList.remove("temp-pop");
    }, 500);
    // 移除监听，避免后续hover触发过渡时误执行逻辑
    nav.removeEventListener("transitionend", handlePopEnd);
  };

  nav.addEventListener("transitionend", handlePopEnd);
  // 加类触发展开
  nav.classList.add("temp-pop");
  console.log("to 50px");
};

改完之后点击按钮弹出引导、自动收回、后续hover展开的逻辑完全不会互相冲突，也不会出现样式优先级打架的问题。

内容的提问来源于stack exchange，提问作者Jure Ereš