title: Internet Explorer hover behavior not working
body: <p>I am having issue with IE9. When hovering .photo-nav the .photo-nav-icon should become visible. This works fine in every other browser I have tried.</p>
  
  <p>Here is my mark-up:</p>
  
  <pre><code>&lt;div class="photo-content"&gt;
      &lt;img class="photo-img" src="/Images/empty.gif" /&gt;
      &lt;div class="photo-nav prev" data-direction="prev"&gt;
          &lt;div class="photo-nav-icon prev"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="photo-nav next" data-direction="next"&gt;
          &lt;div class="photo-nav-icon next"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>.photo-content { position: relative; width: 600px; height: 400px; margin: 0 auto; }
  .photo-img { width: 600px; height: 400px; display:block; }
  .photo-nav { position: absolute; height: 400px; width: 72px; }
  .photo-nav.prev { top: 0; left: 0; }
  .photo-nav.next { top: 0; right: 0; }
  .photo-nav-icon { height: 60px; width: 60px; display: none; }
  .photo-nav-icon.prev { margin: 170px 0 0 10px; }
  .photo-nav-icon.next { background-position: 0 -60px; margin: 170px 10px 0 0; }
  .photo-nav:hover &gt; .photo-nav-icon { display: block; }
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/iGanja/3GeEY/" rel="nofollow">Fiddle</a> of the problem.</p>
  
  <p>Please note; the borders in the Fiddle are NOT part of the design. They are only there to show the framework since the images are not available. However, one interesting note is that IE does recognize the border of the photo-nav div and will then react to the hover, but not the body of the div.</p>
  
  <p>One other note: If I change the img to a div and use the background-image instead, IE seems to work correctly, however this causes other issues, as I unable/unaware how to hook the onload event of a background image.</p>
  
  <p>Lastly, the doctype is <code>&lt;!DOCTYPE html&gt;</code></p>