Html 仅CSS-当鼠标不在侧边栏上时，删除覆盖（或使覆盖消失）

我想知道当屏幕尺寸低于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-->

如果你看到这个片段，你会注意到在徽标的悬停处，边栏会显示出来，并且在边栏后面有一个覆盖层。然而，当我离开侧边栏时，我也希望侧边栏消失，并使覆盖消失

你知道如何做到这一点吗

非常感谢你

/*末端缩放效果*/
[类别*=“列-”]{
宽度：33.33%；
}
@仅介质屏幕和（最大宽度：1024px）{
[类别*=“列-”]{
宽度：50%；
}
#李梅努特姆{
显示：无；
}
#悬停，覆盖{
宽度：30%；
}
#navImg：悬停#重叠返回{
显示：块；
不透明度：1；
}
#叠加：悬停{
显示：无；
}
}
/*端响应*/
.第p排{
-webkit断字：保留所有；
-莫兹断字：保留一切；
-ms断字：保留全部；
-o-word-break：保留所有；
断字：保留一切；
}
.覆盖{
身高：100%；
宽度：0；
位置：固定；
z指数：2；
顶部：45px；
左：0；
背景色：rgba（244,67,54,1.0）；
溢出x：隐藏；
边缘顶部：25px；
过渡：0.5s缓解；
}
.覆盖{
显示：块；
颜色：白色；
填充：20px 16px；
文字装饰：无；
文本对齐：居中；
字体大小：20px；
}
#叠加{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
顶部：70像素；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.8）；
过渡：0.5s缓解；
z指数：-3；
不透明度：0；
}

哦，天哪，我真是太蠢了。好的，所以我注意到，出于某种原因，CSS没有隐藏

#overlyback

CSS id。我只是在html中设置了如下样式：

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

在我看来，当我离开侧边栏时，黑色覆盖层消失了。。。如果我错了，那么我需要更多的澄清。Hello@InvincibleM，如果你把侧边栏放在logo区域的顶部，一切似乎都消失了。但是如果你把侧边栏放在“内容区域”上，并在黑色覆盖上结束，侧边栏不会消失，覆盖也不会消失。好吧，@Kirshna，如果我理解正确，你想在黑色覆盖上悬停时不保持导航菜单打开吗？@invincible，没错。黑色覆盖只是在侧栏导航打开时屏蔽内容。侧栏导航由徽标图像上的“结束”按钮激活。但看起来现在唯一能移除它的方法就是回到徽标图像的周围。但是想知道是否有一种方法可以让边栏在鼠标以任何方式不再位于边栏上方时立即消失覆盖。@不可侵犯，这很有趣。感谢您提供此解决方案。我实际上需要覆盖在那里来掩盖内容。但有趣的是，当您将叠加备份的显示设置为“无”时，sidenav的行为应该是这样的。所以我相信我的黑色覆盖方式可能是问题所在。当显示sidenav时，是否有其他方法显示覆盖？是的，但我认为它需要JS，我不知道如何实现它。但也许明天我能想出办法。谢谢@InvincibleM。非常感谢。同时，我会再看一次，看看是否能破解它。：）

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

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