The following "navigation bar" has transparent anchors which become solid when hovered. This is just a VERY simply example, you can make this work for lots of things.
The second and third examples are the same, using different child background colors
/* we don't want our lists to actually render as lists */
ul, li { list-style: none; margin: 0; padding: 0; }
/* CREATE A CLEARING ELEMENT */
ul:after {
content: "."; overflow: hidden;
display: block; height: 0; clear: both;
visibility: hidden;
}
/* IE "clearing" */
* html ul {
height: 1em;
}
/* DONE CLEARING ELEMENT */
/* CREATE THE NAVIGATION */
ul.one {
background: url(http://www.zoekmachine-optimalisatie.org/mmmbeer/images/bar.jpg) repeat-x -100px 0;
margin-bottom: 2em;
}
ul.one li { text-align: center; }
/* line the li's side-by-side */
ul.one li {
float: left;
/* if you don't want the silly rounding errors,
use something other than percentages */
width: 25%;
overflow: hidden;
font-weight: bold;
}
/* make the anchor transparent when not hovered */
ul.one li a {
/* run all the "transparency" csses */
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
filter:alpha(opacity=50);
/* end transparency css */
/* make the anchors consume the WHOLE
block */
display: block;
padding: 1em 0;
/* these are going to be the actual
colors when hovered. They are blended
with the background when unhovered. */
background-color: #fc9;
color: #000;
}
/* THESE ARE THE ALTERNATE COLORS */
ul.two li a { background-color: #900; }
ul.three li a { background-color: #039; }
/* IE fix for transparency:
IE doesn't apply transparency to
unpositioned elements, apparently.
This also fixes IE's problem of NOT
making the entire block clickable
*/
* html ul.one li a {
float: left; width: 100%;
}
/* set full opacity for hovering */
ul.one li a:hover {
/* note, using 1 seems to make things flash */
-moz-opacity: .99;
-khtml-opacity: .99;
filter:alpha(opacity=100);
opacity: .99;
}