Quick CSS class explanation

[elpedro]

Hey guys, I'm using this im my CSS to work as a rollover image link. Anyone care to explain what it's doing Its the part double quoted I'm stumped on.

* html a:hover {
visibility:visible
}

/*About*/
.about_nav {
float: left;
font-family: arial, helvetica, sans-serif;
background: url(images/buttons/about_b.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 160px;
height: 100px;
margin: 0;
padding: 0;
}

.about_nav a {
display: block;
color: #000000;
font-size: 11px;
width: 160px;
height: 100px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.about_nav img {
width: 160px;
height: 100px;
border: 0
}

.about_nav a:hover img {
visibility:hidden
}

And the XHTML part

<div class="about_nav">
<a href="about.html"><img src="images/buttons/about_a.jpg" alt="About" border="0" /></a></div>

Thank you - here's it so far in action www.guildwarsbase.com/uni/web

 

[elpedro]

Is there a simpler CSS/XHTML way of doing it? I don't want to use javascript, I saw a way of placing rollover buttons in an ordered list tag <ol> to avoid using float. But I don't this is this XHTML valid.

 

[elpedro]

Ah cool, I will give these a try. This is for a uni assignment, one of the criteria is valid XHTML and CSS so I have to play by the rules

Thanks again!

 

[elpedro]

Thanks again, Ill give this a crack 2morro. Really interesting seeing that google one, crazy concept I'd never thought of moving a single image position for multiple images; not just roll over!