title: Hover/mouseover not firing in IE, image in the way
body: <p>I have a div and within that div is an image, and layed on top of those is 2 divs which have jquery hover attached to them (same issue with onmouseover though, so not jquery).</p>
  
  <p>Problem is when the image is loaded, even though the divs are layed on top of the image they won't fire because the image is always on top (even though it isn't actually, and i've tried putting it lower down on z-index but it didn't help).</p>
  
  <p>jquery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $(this).find("#largeInset").find(".content").css("width","0");
  
      $("#largeInset").hover (function() { 
          $(this).find(".content").animate({width: '100%'}, 500, function() {});
      },
      function() { 
          $(this).find(".content").animate({width: '0'}, 500, function() {});
      });
  
  
      $(this).find("#largeArticles").find(".content").css("width","0");
  
      $("#largeArticles").hover (function() { 
          $(this).find(".content").animate({width: '40%'}, 500, function() {});
      },
      function() { 
          $(this).find(".content").animate({width: '0'}, 500, function() {});
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="largeContent"&gt;
      &lt;img src="&lt;?php  echo $img[0]; ?&gt;" border="0" alt="" title="" /&gt;
          &lt;div id="largeInset"&gt;
              &lt;div class="content"&gt;
              [content]
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="largeArticles"&gt;
              &lt;div class="content"&gt;
  
              &lt;ul&gt; (loop fills this)
                  &lt;li&gt;
                  [content]
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
              &lt;br style="clear: both;" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Is this a known IE bug that I just haven't come accross before? Or is there a bug in my code? When filled with content the largeInset and largeArticles divs should fire on hover and slide out across the image, works in chrome but not IE as IE seems to select the image on top of the divs even though they are actually below it (Would work fine if the image didn't load).</p>
  
  <p>Any ideas? Hopefully I made sense.</p>
  
  <p>CSS:</p>
  
  <pre><code>    .articles { position: relative; width: 100%; padding: 0; float: left; background-color: #fff; }
  .large { margin: 0 0 10px; border: 0px solid #000; min-height: 200px; }
  .large img { max-width: 100%; min-width: 100%; min-height: 350px; z-index: -1; }
  
  .largeContent { z-index: 99; position: absolute; top: 0; width: 100%; height: 100%; }
  .filler { width: 100%; height: 100%; }
  #largeInset { position: absolute; top: 0; right: 0; min-height: 100%; width: 25%; color: #fff; }
  #largeInset .head { padding: 10px 0; }
  #largeInset p { font-size: 0.9em; margin: 5px 10px; }
  #largeInset .content { overflow: hidden; position: absolute; top:0; background-color: #000; right: 0; color: #fff; }
  
  #largeArticles { position: absolute; top: 0; left: 0; width: 25%; min-height: 100%; }
  #largeArticles .content { overflow: hidden; position: absolute; top: 0; left: 0; width: 40%; background-color: #000; }
  </code></pre>