Easy. You could've just looked at the source, but I'll explain the gist. The contents is always there, it just fades in with the background colourwise. Open the page press ctrl+a while not hovering over the thing, see the text? You should. Then on hover it applies a background image and that's that.
Here's a test example code which only changes the background colour since you need the image for the other.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
body {
background-color: #000;
}
a#skip {
display: block;
position:absolute;
top:0;
left:0;
width:100%;
padding: 0 0 1em 0;
background: transparent;
font-weight: bold;
text-align: center;
}
a#skip:link, a#skip:visited {
color: #191919;
}
a#skip:hover, a#skip:focus, a#skip:active {
background: #fc3 no-repeat center bottom;
}
</style>
</head>
<body>
<a id="skip" href="#content" title="Skip to content">Skip to content</a>
</body>
</html>
__________________
George Bush would never take me alive.
|
