仅CSS-当鼠标不在侧边栏上时，删除覆盖层(或使覆盖消失)

Question

当屏幕大小低于1024px

时，一旦鼠标不在侧边栏菜单，我想使覆盖层消失如何消失。

这是NAV的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

哦，我的天哪，我很愚蠢。好的，所以我注意到，由于某种原因，CSS没有隐藏#overlayBack CSS ID。我只是在html中造型：

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

to

<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>

希望这会有所帮助，如果您的网站非常好，好运！