title: CSS remove hover effect when semi-transparent div overlays another div
body: <p>I have several underlaying divs with hover effect. Sometimes I need to show modal dialog and all undelaying divs should be "disabled". This is done by placing semi-transparent high z-index div on top of them, but the problem is that hover effect on underlaying div stays until I move my mouse. Is there a way to "unhover" underlaying divs when overlaying semi-transparent div becomes visible?</p>
  
  <p><a href="http://jsfiddle.net/DRYKW/4/" rel="nofollow">Simplified exanple</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="somediv"&gt;&lt;/div&gt;
  &lt;div id="modal"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#modal {
      z-index: 1000;
      background:#000; 
      position:fixed; 
      top:0; left:0; 
      width:100%; 
      height:100%;
      display: none;
      opacity: 0.3;
  }
  
  .somediv {
      position: absolute;
      left: 20px;
      top: 20px;
      width: 100px;
      height: 100px;
      background-color: red;
  }
  
  .somediv:hover {
      background-color: blue;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>setTimeout(function(){
      $("#modal").show();
  }, 5000);
  </code></pre>
  
  <p>Hover over square and wait 5 seconds.</p>