Problems with jQuery hover() in IE7-8

Question

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...)

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:

<div id="wrapper">
  <img src="https://placehold.it/488x488?text=Background+image" alt="">
  <div class="pin one">
  </div>
  <div class="pin two">
  </div>
  <div class="pin three">
  </div>
</div>

Js:

$('.pin').hover(function() {
  $(this).addClass('hovered');
    //window.console && console.log('foo');
}, function() {
  $(this).removeClass('hovered');
});

Fiddle here - which obviously won't run on IE7 or 8.

Any ideas what's wrong?