Extended css sprites not working with :hover?

Question

Hi, 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

What IE version are you using ?

:hover is not supposed to work on older IE (IE7 is supposed to support this pseudo class).

This article "IE CSS Hover Fix" lists some of the techniques used to make :hover run correctly, like IE's proprietary expression function, or HTC (HTML Component).

Answer 2

Actually, IE supports :hover for links. I believe the problem here is using the 'Clip' css property. I'd suggest looking for another solution, this is a common thing to do, and it could take longer to debug it that to try a different approach.

Answer 3

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.

Answer 4

OK, here's what my research has uncovered (and correct me if I'm wrong): IE supports a:hover, but it apparently will not apply it to child elements.

So, I've created a workaround using overflow:hidden and margins using your current markup. I would surmise that you could still use the clip property, but it may require another element (maybe not, though). The solution is up here and appears to work correctly in both FF and IE6 (have not tested in other browsers).

Also, I'd like to address annakata in saying that menu buttons and logos haven't historically been background images and have printed on printouts, so css spriting has changed that behavior (in favor of performance).

Answer 5

Here's how I usually make my CSS sprites without the IMG child tag within the A tag:

HTML:

<div class="menu">
    <a href="#">foo</a>
    <a href="#">foo</a>
</div>

CSS:

/* you need to specify its height and width so that they fit with the part of the sprite you want to show */
.menu a{display:block;width: 100px; height: 100px; float:left; margin-right: 10px; text-indent: -9999px;}
/* the background-position is set to top. */
.menu a{background: url(../images/whatever.png) no-repeat top center;} 
/* the background-position is set to bottom. */
.menu a:hover{background-position: bottom center;}

your whatever.png file would have a height of 200px with both states.

thats it