A (Novel?) Pure CSS Image Rollover Technique

<p> CSS: <blockquote> a.rollover { background: no-repeat -9999px -9999px; display: block; } <br> a.rollover:hover { background: no-repeat top left; }<br> a.rollover:hover img { visibility: hidden; }<br> </blockquote></p> <p>HTML: <blockquote> &lt;a class="rollover" style="background-image:url('blog-roll.png')" href="/blog"&gt;<br> &lt;img border="0" alt="blog" src="blog.png"/&gt;<br> &lt;/a&gt; </blockquote></p> <p>This is a variant on other techniques I found. By setting the <tt>a</tt> tag to be a block-level element, it gets the size of the contained image; by setting the background by offsetting it, you get preload; by setting the foreground but using <tt>visibility:hidden</tt> (as opposed to <tt>display:none</tt>) it keeps its size. You also get a single point of truth for the button: image, rollver image and alt tag are all in the same place. Finally, this works everywhere I tested it (Safari 3.1.2; Firefox 2 and 3; IE6 and 7). </p> <p>There are a few gotchas: don't be lazy and set <tt>background</tt> instead of <tt>background-image</tt> in the <tt>style</tt> tag, because that sets the other <tt>background</tt> CSS back to the default, specifically <tt>repeat:repeat</tt>. The images need to be the same size, pretty much. If you haven't cleared borders around images, they might be a problem, too.</p> <p>I dunno if this is actually novel, but I didn't see it as I looked around. The (IMO less natural and more fiddly) technique of using a single image and changing the offset seems to be more popular.</p> <p></p>
This is what will show up as the comment author
Type in the word 'potato'. This is advanced anti-spam technology.
I might delete your comment for reasons including spam, annoyance, things I wouldn't want my mother to read, ruining surprises, etc. That said, I do love receiving comments.