The rollover image is already loaded as the background image of the p
tag that contains the a
tag with the no-roll image (view source). It does not need to be loaded (or, in the case of Internet Explorer, reloaded) on hover
, so there is no flicker or flash of white before the rollover image appears.
On rollover (CSS hover
), the link background CSS is set to none
, revealing the background image of the p
tag beneath. Yep, it's a pig-ugly image, but good enough for a demo.
Here's another example using a typical 3rd party link (in this case, Reddit):