title: Hiding overlay div styled using adjacent sibling combinator in IE (9, 10 and 11)
body: <p>I have the following CSS style for a overlay (hovering) div to prevent user interaction. The logic behind the styling is that when the div with <code>indicator</code> class is displayed then overlay is also displayed. When the div with <code>indicator</code> class hides using <code>display: none</code>, then the overlay has to be hided. This style works fine in Chrome and Firfox. But in IE overlay div hides only when moving the mouse. Sometimes a small movement is enough. Other times, it has to be moved out of the overlay div (note: overlay div actually don't hide the whole page). How can I hide overlay div without moving the mouse in IE?</p>
  
  <pre><code>div[id*='someDivId'] .indicator + .layout .overlay {
      background: #e9e9e9 url(img/spinner.gif) no-repeat 50% 50%;
      opacity: 0.3;
      z-index: 40001;
      height: 100%;
      width: 100%;
      pointer-events: inherit;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
  }
  
  div[id*='someDivId'] .indicator[style*="none"] + .layout .overlay {
      z-index: -1;
      position: absolute;
      opacity: 0;
      pointer-events: none;
  }
  </code></pre>
  
  <p>Please find below an overview of html elements structure</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;!-- header contents --&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="someDivId1234567"&gt;
              &lt;div class="indicator"&gt;
                  &lt;!-- loading indicator --&gt;
              &lt;/div&gt;
              &lt;div class="layout"&gt;
                  &lt;div class="overlay"&gt;&lt;/div&gt;
                  &lt;div&gt;
                      &lt;!-- contents --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>