Extended css sprites not working with :hover?

Question

I just encountered this article of an extention of css sprites that enables the spriting trick with foreground images . I tried to use the technique on :hover but it doesn't appear to work in IE and Opera. See my attempt to use this technique for a menu here: http://www.kavoir.com/examples/jenny-css-sprites/menu.html

On FF and Safari, it works properly but just doesn't work at all in IE and Opera. Modified the code in a few ways but still doesn't work at all. Maybe it's impossible?

Tried to ask the author but she deleted my comment.

Any idea how to make this work on all browsers?

Update: Thanks for the answers but the :hover IS for , so I believe all IE browsers should work out the effects. Therefore the problem might very probably be about the clip property.

I just want to make sure if :hover works properly with clip on . Appears so far it doesn't.

Answer 1

The whole technique described seems problematic to me.

Jennifer's points:

1. You can’t attach alternate text to divs for accessibility purposes
2. CSS Spriting and the IE6 PNG fix are incompatible
3. The images will not print out on printouts unless the client option to print background images is selected (this is bad for logos and menus, etc)
4. For images in pages (that are not actually background images), it seems semantically bad to hide the image in CSS.

On 1, given that these are background images and not semantically images in their own right I think the correct approach is to put that text directly in the markup and hide it with CSS, rather than the other way around.

Number 2 is valid, but not the end of the world. To act on 3 is an abuse imho - if the user doesn't want to print background images, why are you forcing this? Again this comes back to semantic interpretation.

Number 4 I completely agree with, but then if you're just hiding the image in the conglomeration of a sprite'd image anyway what do you gain? You could debate this, but an <img> has a semantic meaning representing a resource with a URI and as such that URI should be distinct, not dependant on interpreted CSS. View/Copy/Save Image is going to be negatively affected by this.

It also seems to react quite slowly in my FF (which admittedly is subject to tab abuse), I imagine the clipping maths is taking a not inconsiderable effort.

Long story short, I think the existing background-image/position technique is superior.