Efectos "rollover": JavaScript versus CSS (y 2)

La aplicación de hojas de estilo para prescindir del script de un rollover ya se explicó en el recorte "Rollover" de imágenes sin JavaScript". El código CSS sería como el siguiente:

a span { display:none; }
 
#Uno { background:url(uno_in.png) no-repeat; }
#Uno:hover { background:url(uno_ac.png) no-repeat; }
...

Pero donde más se nota el ahorro es en el código HTML:

<li id="Uno">
  <a href="loquesea.html">
    <span>Uno</span>
  </a>
</li>

Aparentemente este método es más limpio (el código se lee mejor), más semántico (el contenido del enlace es texto, no una imagen que representa un texto), más corto (ahorro de un 20% por enlace, aproximadamente) y más compatible (no depende del permiso para ejecución de scripts en el lado del cliente).

<< Anterior.

I.D.O. originada a partir del mensaje onLoad vs. onFocus publicado en el grupo e.c.i.w.paginas-web.

tierra de nómadas