仅限CSS - 当鼠标不在侧边栏上时，删除叠加层（或使叠加层消失）

Question

我想知道当屏幕尺寸低于1024px时鼠标不在侧边栏菜单上时如何使叠加层消失

这是导航的html

<!--BEGINNING NAV-->

<ul id="nav">
    <div id="navImg">
        <img src="img/YouTube-logo.png" id="youtubeLogo" alt='Website Logo'>
        <!--BEGINNING OVERLAY-->
        <div id="overlayBack"></div>
        <div id="myOverlay" class="overlay">
            <!-- Overlay content -->
            <div class="overlay-content">
                <a href="#">Services</a>
                <a href="#">Portfolio</a>
                <a href="#">Contact Us</a>
            </div>
        </div>
        <!--END OVERLAY-->
    </div>
    <div id="menuItem">
        <li><a href="#services">Services</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact Us</a></li>
    </div>
</ul>
<!--End NAV-->

这是CSS。

/*End Scale Effect*/

[class*="col-"] {
    width: 33.33%;
}

@media only screen and (max-width: 1024px) {
    [class*="col-"] {
        width: 50%;
    }
    #menuItem li {
        display: none;
    }
    #navImg:hover .overlay {
        width: 30%;
    }
    #navImg:hover #overlayBack {
        display: block;
        opacity: 1;
    }
    #overlayBack:hover {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    [class*="col-"] {
        width: 100%;
    }
    #menuItem li {
        display: none;
    }
    #navImg:hover .overlay {
        width: 100%;
    }
}


/*End Responsive*/

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 45px;
    left: 0;
    background-color: rgba(244, 67, 54, 1.0);
    overflow-x: hidden;
    margin-top: 25px;
    transition: 0.5s ease;
}

.overlay a {
    display: block;
    color: white;
    padding: 20px 16px;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
}

#overlayBack {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.5s ease;
    z-index: -3;
    opacity: 0;
}

如果您看到该片段，您会注意到，在悬停徽标时，侧边栏会显示，并且侧边栏后面会有一个叠加层。但是，当我离开侧边栏时，我还想让侧边栏消失，并使叠加层也消失。

知道如何做到这一点。

非常感谢。

/*End Scale Effect*/

[class*="col-"] {
    width: 33.33%;
}

@media only screen and (max-width: 1024px) {
    [class*="col-"] {
        width: 50%;
    }
    #menuItem li {
        display: none;
    }
    #navImg:hover .overlay {
        width: 30%;
    }
    #navImg:hover #overlayBack {
        display: block;
        opacity: 1;
    }
    #overlayBack:hover {
        display: none;
    }
}


/*End Responsive*/

.row p {
    -webkit-word-break: keep-all;
    -moz-word-break: keep-all;
    -ms-word-break: keep-all;
    -o-word-break: keep-all;
    word-break: keep-all;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 45px;
    left: 0;
    background-color: rgba(244, 67, 54, 1.0);
    overflow-x: hidden;
    margin-top: 25px;
    transition: 0.5s ease;
}

.overlay a {
    display: block;
    color: white;
    padding: 20px 16px;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
}

#overlayBack {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.5s ease;
    z-index: -3;
    opacity: 0;
}

<ul id="nav">
        <div id="navImg">
            <img src="img/YouTube-logo.png" id="youtubeLogo" alt='Website Logo'>
            <!--BEGINNING OVERLAY-->
            <div id="overlayBack"></div>
            <div id="myOverlay" class="overlay">
                <!-- Overlay content -->
                <div class="overlay-content">
                    <a href="#">Services</a>
                    <a href="#">Portfolio</a>
                    <a href="#">Contact Us</a>
                </div>
            </div>
            <!--END OVERLAY-->
        </div>
        <div id="menuItem">
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </div>
    </ul>
    

Answer 1

OH我的GOSH IM愚蠢如同。好的，所以我注意到由于某种原因CSS没有隐藏#overlayBack css id。我只是像html那样设计样式：

<div id="overlayBack"></div>

到

<div id="overlayBack" style="display: none;"></div>

这是一个正在运行的例子：

/*End Scale Effect*/

[class*="col-"] {
    width: 33.33%;
}

@media only screen and (max-width: 1024px) {
    [class*="col-"] {
        width: 50%;
    }
    #menuItem li {
        display: none;
    }
    #navImg:hover .overlay {
        width: 30%;
    }
    #navImg:hover #overlayBack {
        display: block;
        opacity: 1;
    }
    #overlayBack:hover {
        display: none;
    }
}


/*End Responsive*/

.row p {
    -webkit-word-break: keep-all;
    -moz-word-break: keep-all;
    -ms-word-break: keep-all;
    -o-word-break: keep-all;
    word-break: keep-all;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 45px;
    left: 0;
    background-color: rgba(244, 67, 54, 1.0);
    overflow-x: hidden;
    margin-top: 25px;
    transition: 0.5s ease;
}

.overlay a {
    display: block;
    color: white;
    padding: 20px 16px;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
}

#overlayBack {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.5s ease;
    z-index: -3;
    opacity: 0;
}

<ul id="nav">
        <div id="navImg">
            <img src="img/YouTube-logo.png" id="youtubeLogo" alt='Website Logo'>
            <!--BEGINNING OVERLAY-->
            <div id="overlayBack" style="display:none;"></div>
            <div id="myOverlay" class="overlay">
                <!-- Overlay content -->
                <div class="overlay-content">
                    <a href="#">Services</a>
                    <a href="#">Portfolio</a>
                    <a href="#">Contact Us</a>
                </div>
            </div>
            <!--END OVERLAY-->
        </div>
        <div id="menuItem">
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </div>
    </ul>

希望这会有所帮助，如果这对您的网站来说真是太棒了，那就好了！