quick tutorials
CSS Rollovers
Guess what? CSS can be dynamic as well. Elsewhere, we have a tutorial for creating buttons using CSS only. Here you're going to see how to use a similar technique to create text which appears when you roll over a link, just like in the example here. After you've done this, you should be able to work out how to combine it with the buttons recipe for a really cool result.
This technique works on Windows Internet Explorer 5.5 and later, as well as Netscape 6. Strangely, it doesn't work on Macintosh Internet Explorer 5, but it doesn't break anything either - the rollover text simply doesn't appear.
The HTML
To re-create a page like the demo you'll need some HTML that looks something like this (taking just the code for the first three links in the navigation panel.)
<div id="navigator">
<p class="navlink"><a href="../rollovers.html">Rollover Recipe<span>Well looky here - text is appearing when I roll over the link, and there's not a javascript in site</span></a></p>
<p class="navlink"><a href="../index.html">CSS Cookbook<span>Find more home cooking goodness from the kitchen of the House of Style</span></a></p>
<p class="navlink"><a href="../../CSS_gallery.html">CSS Gallery<span>More and more are taking the plunge - in case our site isn't enough evidence for you, take a look here</span></a></p>
...
</div>
This should look familiar if you've already seen our CSS Buttons tutorial. The obvious difference though is the text inside the <span>
elements. You'll recognize that this is what appears below the navigation panel when the links are rolled over. What is the trick?
The CSS
So that you can create a style sheet that works exactly like my example, here's the CSS for the general appearance of the page and the navigation panel. I'm not going to go over any of this here though, as it really is just an implementation of the same ideas you can see in the links tutorial, and also in the tutorial where you create buttons.
body
{font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #4c4c4c;
font-size: 1em;}
#navigator
{background-color: #ff7d00;
width: 25%;
position: absolute;
top: 10px;
left: 10px;
padding: 1px;
p.navlink
{font-weight: bold;
text-align: center;
margin-bottom: 1px;
margin-top: 0px;}
p.navlink a
{text-decoration: none;
display: block;
color: #ff7d00;
background-color: #4c4c4c;
padding-top: 4px;
padding-bottom: 4px;}
p.navlink a:hover
{background-color: #333333;}
The navigation panel is basically the same as in the button recipe, but this time there are no borders to create the button effect. I went for quite a flat design because I thought with the rollovers anything more would make the whole thing too busy.
Selecting the Rollovers
Here's the magic. Looking again at the HTML, where exactly is that rollover text? It's inside a <span>
element, and this <span>
element is itself inside an <a>
element. Of course, you know that <a>
elements are kind of special in that they can be selected depending on what state they are in. In CSS1 these were called the Link Pseudo Class Selectors.
a:link
- neutrala:visited
- when the link has been recently visiteda:hover
- when the mouse is over the linka:active
- when the mouse is clicking the link
In fact, CSS2 took the Link Pseudo Class Selector, extended it, and renamed it the Dynamic Pseudo Class Selector. The extension meant that now any element can be selected depending on its state. So you can now in theory have
table:hover
which would allow you to create tables that appeared differently when the mouse was over them (for reasons best know to yourself). I say in theory because in practice Dynamic Pseudo Class Selectors are not widely supported except insofar as they are applied to <a> elements.
We want to not show those <span>
elements at all when the <a>
elements are in the link
or the visited
state, and make them appear only when they are in the hover
state. Attacking the first part, what do we want to select? We want to select <span>
elements, when they are inside <a>
elements in the link
or visited
state, when they are inside <p>
elements with a class of navlink
. What a mouthful! Fortunately, CSS is significantly more brief than English, so you can say all of that with the following contextual selectors.
p.navlink a:link span {
}
p.navlink a:visited span {
}
Which Property?
Which CSS property can we use to hide the content of the <span>
? The visibility
property might seem from its name to be the obvious answer, but like most obvious answers, it's obviously wrong. Remember, if an element has visibility: hidden
it will indeed be invisible, however all the other elements on the page will be drawn around this empty space as if the <span>
was in fact there. This isn't what we want at all. In fact, we want to use the display
property, set to a value of none
, which means that not only will the <span>
not appear, but the page will be drawn as if it didn't exist in the HTML at all. Give it a go and see what happens - provided you're using Internet Explorer 5.5 or Netscape 6, it should work as you expect.
p.navlink a:link span {
display: none;
}
p.navlink a:visited span {
display: none;
}
How then do we make it appear again when the mouse rolls over the link? You should be able to work out the selector, but what value are you going to use for display
, bearing in mind that you don't want it to just appear where it is in the flow of the HTML, but rather as a separate element positioned elsewhere on the page?
p.navlink a:hover span {
display: block;
}
Did you work it out? Remember, display
can take a number of properties, including inline
and block
which determine how the element will be drawn. In this case, you want the <span>
to be drawn as a block element. Now it's simply a matter of positioning the element where we want it to appear on the page. In my example I've also given it values for font-size
and font-weight
, so that these properties don't just cascade down from the parent element.
p.navlink a:hover span {
display: block;
position: absolute;
top: 22em;
font-size: .8em;
font-weight: normal;
}
Why did I set the value for top
in em
units? Because it's one of the more reliable ways of making sure that the rollover text will always appear further down the page than the navigation panel, no matter what the user's preferred font size.
And that's all there is to it. Now that you've made this happen for text, why don't you try and do the same thing using images instead. I'm sure you'll be able to work this out no problem at all. Happy cooking!