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:

[Ver ejemplo 1][1]{.verejemplo}

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;
  }

[Ver ejemplo 2][2]{.verejemplo}

  • El diseño del menú en sí y de cada botón es parte de su propio talento.

[1]: http://www.csslab.cl/ejemplos/menufadeinout/menu.html “Enlace en CSSLab a “Ejemplo1: Fade in/out en menú con CSS”” [2]: http://www.csslab.cl/ejemplos/menufadeinout/menu2.html “Enlace en CSSLab a “Ejemplo2: Fade in/out en menú con CSS””