Why is this jQuery snippet not working in IE8 like it does in Firefox or Chrome (Live Demo Included)?

I asked for help earlier on Stackoverflow involving whitespace highlighting with the same class when the mouse hovers over any Span with the same class.

It works great:
How do I add a border to all class-sharing elements when the mouse hovered over one of them using jQuery?

   $('span[class]').hover(
function() {
    $('.' + $(this).attr('class')).css('background-color','green');
},
function() {
    $('.' + $(this).attr('class')).css('background-color','yellow');
}
)

      

        
        
        
      

    

Here's an example of using it:
http://dl.dropbox.com/u/638285/0utput.html

However, it does not work as expected in IE8, while it does work in Chrome / Firefox.

Here's a screenshot of it in IE8, with my mouse hovering over the section "> min) { min"

in the middle.

As you can see, it highlighted the range that the mouse hovers perfectly. However, he also highlighted some random gaps above and below that do not have the same class! Only the range with the same class as the one the mouse is in should be highlighted in green. In this screenshot, there should only be a green green section.

Here is a screenshot that it works correctly in Firefox / Chrome with my mouse in the same position:

This screenshot is correct because the range over which the mouse ended (green section) is the only one in this section that shares this class.

Why is IE8 accidentally highlighting green highlights when it shouldn't (they don't share the same class) using my little jQuery snippet?

Again, if you want to see it live, I have it here: http://dl.dropbox.com/u/638285/0utput.html