0xDECAFBAD

It's all spinning wheels and self-doubt until the first pot of coffee.

CSS, Background Images, and Rollovers

It occurred to me that this ought to be possible by reassigning a container's background-image property when it is :hover-ed.
Source: Images and thumbnails, a pure CSS hack (via dbagg: Items by Time)

Yup, and you can do the same for every other pseudo-class of an anchor tag. I read about this via Eric Meyer’s article on the O‘Reilly Network. I’m still very much a CSS neophyte, but it’s helped me incredibly at work, where I was able to create a site layout with one set of HTML pages styled by a small library of CSS files for look & feel.

<p>Yeah, yeah, that&#8217;s what it&#8217;s for, you say.  But it surprised the hell out of me that I was able to abuse background image properties of containers to create JavaScript-free rollovers, as well as select between completely different image-based layout elements.  This isn&#8217;t pure utopian <span class="caps">CSS</span> that I&#8217;m doing, and most of my position is still with tables, but thanks to blank pixel images atop <span class="caps">CSS</span>-controlled background images, I can do what I think are amazing things.</p>

<p>Now I just have to break free of the rest of my <span class="caps">HTML</span> crutches, circa 1996.</p>

shortname=css_rollovers

Archived Comments

  • anthony
    The :hover pseudoelement only works for anchor tags in MSIE, just so you know. There's workarounds for it, but they're all pretty ugly. The strange implementation of CSS in Internet Explorer is one of my greater headaches. Just wait until you start trying to position elements using float. (PS: I'm the anthony from the FC list, found your site linked from Greg's)