title: Problems with jQuery hover() in IE7-8
body: <p>I'm using jQuery to add a class to some elements on hover() in order to add some additional styling, but somehow it's not working in Internet Explorer 7 - or rather, it seems to be working sporadically on some of the elemets.
  (It's for an old SharePoint installation, so I need it to be compatible with IE7 and jQuery 1.4.1...)</p>
  <p>I know IE 7-8 have issues with z-index, but I don't know if that's why it's not working here.
  It works in Chrome and Firefox.
  My markup is this:</p>
  <pre><code>&lt;div id=&quot;wrapper&quot;&gt;
    &lt;img src=&quot;https://placehold.it/488x488?text=Background+image&quot; alt=&quot;&quot;&gt;
    &lt;div class=&quot;pin one&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;pin two&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;pin three&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Js:</p>
  <pre><code>$('.pin').hover(function() {
    $(this).addClass('hovered');
      //window.console &amp;&amp; console.log('foo');
  }, function() {
    $(this).removeClass('hovered');
  });
  </code></pre>
  <p><a href="https://jsfiddle.net/mrbbar0d/" rel="nofollow noreferrer">Fiddle here</a> - which obviously won't run on IE7 or 8.</p>
  <p>Any ideas what's wrong?</p>