Situación: tenemos un menú con N elementos, los cuales se van activando (opacity: 1) a medida que el mouse pasa sobre cada uno, mientras el resto de los elementos permanecen inactivos (opacity: 0.5). Un efecto simple que se puede realizar tranquilamente con CSS y la caída estrepitosa de IE6.
Primero, el ejemplo del nunca mal ponderado menú horizontal con listas:
Ahora, el efecto aplicado. Básicamente se agregan 2 instancias diferentes el cambio de opacidad, primero en el :hover de #menu, los links tendrán opacidad 0.5 y al :hover al elemento mismo opacidad 1, todo graciosamente animado mediante transition de CSS3:
#menu a {
transition: 0.3s opacity ease-in-out;
}
#menu:hover a {
opacity: 0.5;
}
#menu a:hover {
opacity: 1;
}
* El diseño del menú en sí y de cada botón es parte de su propio talento.