title: Div flickers with changing z-index with hover CSS selector
body: <p>I'm a bit stuck trying to figure why this won't work. I have two divs overlaid one another, one with a caption and one without. The one without has a higher z-index, but on hover, it is supposed to z-index:0 to reveal the lower layer. When I hover over top of the div, the "wcaption" div displays properly. When I hover the caption area of the div, it flickers back and forth between the "wcaption" div and the "wocaption" div many times per second. I have tried it on other browsers and I get the same result.</p>
  
  <pre><code>&lt;style&gt;
  #ad_content .ad_wocaption {
      position: absolute;
      top: 0;
      z-index:100;
  }
  #ad_content .ad_wocaption:hover {
      z-index: 0;
  }
  #ad_content .ad_caption {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
      filter: alpha(opacity=75);
      -moz-opacity: 0.75;
      -khtml-opacity: 0.75;
      font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 12px;
      font-weight: bold;
      position: absolute;
      bottom: 0;
      z-index: 20;
      height: 60px ;
  }
  #opacity_filter {
      background: #000;
      opacity: 0.75;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
      filter: alpha(opacity=75);
      -moz-opacity: 0.75;
      -khtml-opacity: 0.75;
      width: 134px;
      height: 60px;
      position: absolute;
      bottom: 0;
      z-index: 10;    
  }
  #ad_content .ad_caption p {
      color: fff;
      margin: 5px 8px;
  }
  #ad_content .ad_caption span {
      color: #696767;
      margin-bottom: 5px;
  }
  #ad_content .ad_expand {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 10;
  }
  &lt;/style&gt;
  &lt;div class="ad_wocaption"&gt;
      &lt;a href="https://www.google.com/"&gt;&lt;img src="images/ad_frleft.jpg" /&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;img class="ad_expand" src="images/expand.png" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="ad_wcaption"&gt;
     &lt;a href="https://www.google.com/"&gt;&lt;img src="images/ad_frleft.jpg" /&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;img class="ad_expand" src="images/expand.png" /&gt;&lt;/a&gt;
     &lt;div id="opacity_filter"&gt;&lt;/div&gt;
     &lt;div class="ad_caption"&gt;
          &lt;p&gt;KIA Forte surprises and delights...&lt;/p&gt;
          &lt;span&gt;-MotorTrend&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>