title: Trigger completely separate div based on hover of other div
body: <p>Is it possible to trigger changes to CSS of an element that is completely unrelated to the hovered div?</p>
  
  <p>I have a CSS hover effect on a dropdown menu, that I also want to trigger the opacity of a div right at the bottom of the page to create a background overlay effect.</p>
  
  <p>This is the CSS I'm using: </p>
  
  <pre><code>#overlay {
      background:rgba(0,0,0,0.5);
      position:absolute;
      top:120px;
      left:0;
      z-index:0;
      height:120%;
      width:100%;
      visibility:hidden;
      opacity:0;
  }
  #menu-main-menu li.menu-parent-item:hover ul.sub-menu,
  #menu-main-menu li.menu-parent-item:hover #overlay {
      visibility:visible;
      opacity:1;
  }
  </code></pre>
  
  <p>The hover of the sub menu works fine, but the div #overlay is right at the bottom of the page, and doesn't get called when it's hovered. </p>
  
  <p>I've tried all kinds of alternatives such as :hover > #overlay, :hover + #overlay, but nothing seems to trigger it. I also can't seem to find a definitive answer to the question.</p>
  
  <p>Is it possible?</p>