单击按钮后，将用户重定向到菜单部分，从屏幕底部弹出导航栏

Question

感谢Rene现在有效的第一部分。 :)

我有一个我不知道如何修复的错误：

• 它的工作是从屏幕底部弹出NAV栏，以使用户知道它的位置，并且在半半之后恢复了其次
• ，然后用户可以将其悬停在它上，并且它会自动弹出并只要鼠标在其上，并且在鼠标上就可以静置，并且在鼠标上，它可以达到其第一个位置。

问题： ***按钮操作后，Hover Animation不再起作用，是因为JS覆盖CSS NAV：HOVER，如果是这样，您可能知道如何修复它。谢谢您的帮助确实很有帮助！

这是JS代码：

//nav popup

const navHover = function navHover() {
  const nav = document.getElementById("nav");

  nav.style.transition = "all 1s";
};

///////////////////////////////////////////////////////////////////////////
//Menu button

const openNav = function openNav() {
  const menuButton = document.getElementById("menuButton");
  const nav = document.getElementById("nav");

    nav.style.height = "50px";
    console.log("to 50px");

    setTimeout(function navBackDown() {
      nav.style.height = "10px";
      console.log("to 10px");
    }, 600);
};

谢谢您的帮助。

Answer 1

我已经知道了:)再次感谢rene的帮助，

////////////////////////////////////////////////////////////////////////////
//nav popup

const navHover = function navHover() {
  const nav = document.getElementById("nav");
  console.log("hovered")
  
  nav.style.height = "80px";
  nav.style.transition = "all 1s";
  
};

function navOut(){
  nav.style.height = "10px";
  console.log("to 10px");
}

////////////////////////////////////////////////////////////////////////////
//Menu button

const openNav = function openNav() {
  const menuButton = document.getElementById("menuButton");
  const nav = document.getElementById("nav");


    nav.style.height = "50px";
    console.log("to 50px");

    setTimeout(function navBackDown() {
      nav.style.height = "10px";
      console.log("to 10px");
    }, 600);
    
};

我不知道为什么，但是当我“给它一段时间”之间的帮助:)