Question

所以，我不知道如何创建一个演示来展示我的意思，但基本上我有一个推送导航菜单（参见：http://www.w3schools.com/howto/howto_js_sidenav.asp SIDENAV PUSH和OPACITY）我有它几乎完美的工作，我不得不调整javascript，以便在打开菜单时，我的页面的标题（以及其他几个元素）的CSS改变，当菜单关闭时，CSS返回到它的方式是在菜单打开之前...打开菜单后关闭我的标题的悬停效果不再有效。

这是我的标题的css：

#header {
    width: 95%;
    height: 60px;
    left: 2.5%;
    background: white;
    opacity: 0.8;
    position: fixed;
    top: 0px;
    padding: 10px 0px 10px 0px;
    -webkit-border-radius: 0px 0px 30px 30px;
    -moz-border-radius: 0px 0px 30px 30px;
    border-radius: 0px 0px 30px 30px;
    -webkit-box-shadow: 0px 3px 7px 4px rgba(0,0,0,0.65);
    -moz-box-shadow: 0px 3px 7px 4px rgba(0,0,0,0.65);
    box-shadow: 0px 3px 7px 4px rgba(0,0,0,0.65);
    transition: all 0.5s ease-in-out;
    }
#header:hover {
    left: 0;
    opacity: 0.9;
    width: 100%;
    border-radius: 0px;
    }

这是我的javascript：

 function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.getElementById("header").style.position = "relative";
    document.getElementById("header").style.left = "0px";
    document.getElementById("header").style.opacity = "0.9";
    document.getElementById("header").style.width = "100%";
    document.getElementById("header").style.borderRadius = "0px";
    document.getElementById("cover").style.marginTop = "-80px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.8)";
    }

    function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.getElementById("header").style.position = "fixed";
    document.getElementById("header").style.left = "2.5%";
    document.getElementById("header").style.opacity = "0.8";
    document.getElementById("header").style.width = "95%";
    document.getElementById("header").style.borderRadius = "0px 0px 30px 30px";
    document.getElementById("cover").style.marginTop = "0px";
    document.body.style.backgroundColor = "white";
    }

我的工作正是我想要的，除非关闭sidenav后我的悬停类不再有用，希望有人可以指出我缺少的东西。

打开导航菜单后，我丢失了悬停效果

0 个答案: