title: CSS ONLY - Remove overlay (or Make overlay disappear) when mouse not over sidebar
body: <p>I am wondering how to make the overlay disappear as soon as the mouse is not on the sidebar menu when the screen size is below 1024px</p>
  
  <p>This is the html of the nav</p>
  
  <pre><code>&lt;!--BEGINNING NAV--&gt;
  
  &lt;ul id="nav"&gt;
      &lt;div id="navImg"&gt;
          &lt;img src="img/YouTube-logo.png" id="youtubeLogo" alt='Website Logo'&gt;
          &lt;!--BEGINNING OVERLAY--&gt;
          &lt;div id="overlayBack"&gt;&lt;/div&gt;
          &lt;div id="myOverlay" class="overlay"&gt;
              &lt;!-- Overlay content --&gt;
              &lt;div class="overlay-content"&gt;
                  &lt;a href="#"&gt;Services&lt;/a&gt;
                  &lt;a href="#"&gt;Portfolio&lt;/a&gt;
                  &lt;a href="#"&gt;Contact Us&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--END OVERLAY--&gt;
      &lt;/div&gt;
      &lt;div id="menuItem"&gt;
          &lt;li&gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
  &lt;/ul&gt;
  &lt;!--End NAV--&gt;
  </code></pre>
  
  <p>This is the CSS.</p>
  
  <pre><code>/*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;
  }
  </code></pre>
  
  <p>If you see the snippet you will notice that on hover of the logo the sidebar shows up and there is an overlay behind the sidebar. However, when I leave the sidebar I would like also to have the sidebar go away and make the overlay disappear as well.</p>
  
  <p>Any idea how to accomplish this.</p>
  
  <p>Thank you ver much.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="nav"&gt;
          &lt;div id="navImg"&gt;
              &lt;img src="img/YouTube-logo.png" id="youtubeLogo" alt='Website Logo'&gt;
              &lt;!--BEGINNING OVERLAY--&gt;
              &lt;div id="overlayBack"&gt;&lt;/div&gt;
              &lt;div id="myOverlay" class="overlay"&gt;
                  &lt;!-- Overlay content --&gt;
                  &lt;div class="overlay-content"&gt;
                      &lt;a href="#"&gt;Services&lt;/a&gt;
                      &lt;a href="#"&gt;Portfolio&lt;/a&gt;
                      &lt;a href="#"&gt;Contact Us&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--END OVERLAY--&gt;
          &lt;/div&gt;
          &lt;div id="menuItem"&gt;
              &lt;li&gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
      </code></pre>
  </div>
  </div>
  </p>