Fade transition within a sprite graphic

I’m using the first method from the following site to smoothly fade a sprite image containing the idle, hover and active states of a button into one another: http://css-tricks.com/fade-image-within-sprite/
It’s a little hacky but works well in Firefox and Chrome. However, in IE9 (which doesn’t support the transition property anyway, but that’s beside the point right now) the span containing the active state simply will not show and I don’t understand why. Is it a bug?
Here’s a very basic jsfiddle of what I’m trying to accomplish, the background colors would be replaced by a single sprite graphic at different positions obviously: http://jsfiddle.net/KJ9WH/

After playing around with this a little more I found that if I also apply my styles to the active state of the second span, it works as intended. So it seems as if IE9 doesn’t recognize the link but rather the span being clicked on. Interesting.