CSS sprite method

April 1, 2004 1:24 PM

Stupid CSS Tricks: can the CSS sprite method described at various places (ALA, for example) be used to change the background of a container other than the one being rolled over?

With javascript you can, upon rolling over one image (image A), change not only image A but image B, C-- or as many images as you want, really. Is this possible to accomplish with a purely CSS solution?

Yes, I realize the css sprite method actually changes the position of the container's background image. I figure the basic theory should be the same.

posted by precocious to computers & internet (5 comments total)

Theoretically, yes it can be done without javascript, but I don't know it would work in IE. Maybe something along the lines of:

element1:hover element2 {background: url(rollover.gif);}
posted by yerfatma at 2:20 PM on April 1, 2004

Unfortunately the :hover pseudo-class only works for "a" selectors in IE.
posted by brownpau at 3:10 PM on April 1, 2004

Yeah, that's why I didn't know if it'd work in IE-- if the element in question isn't a link, you'll have to wrap one around it (and maybe flip the cursor back to an arrow to hide the fact it's a link).
posted by yerfatma at 6:17 PM on April 1, 2004

Thanks, dudes.

I've decided to save my sanity and go with javascript.
posted by precocious at 6:52 PM on April 1, 2004

Y'know, I was just thinking about it and I had some serious problems dynamically assigning backgrounds to elements through JavaScript in IE. So your sanity may not be as safe as you hoped.
posted by yerfatma at 10:02 AM on April 2, 2004