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

Question

感谢Rene现在工作的第一部分。:)

我有一个错误，我不知道如何修复:

• 它的工作是从屏幕底部弹出导航栏，让用户知道它在哪里，然后在半秒后返回
• 然后用户可以将鼠标悬停在它上面，它会自动弹出，只要鼠标在它上面，它就会一直保持在上面，当鼠标离开时，它会回到它的第一个位置。

问题:按钮动作后，悬停动画不再工作，是因为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);

};

我也不知道为什么，但是当我"给它一些时间"在两者之间，它只是工作:)