Sí, la validación fallaría porque igualmente el <div> es elemento de
bloque. De todos modos, sigo sin entender por qué usas <h2>, porque
aparentemente no estás encabezando contenidos de ningún tipo (el <h2>
debería encabezar contenidos en el documento donde lo pones, no en el
siguiente). Otra cosa es que puedes poner dos <span> con clases
distintas con display: block; y solaparlos para hacer ese efecto de
ocultamiento/desocultamiento. Más o menos la idea básica sería algo así:
<div class="roll">
<a>
<span class="img1"></span><!-- imagen visible por defecto -->
<span class="img2"></span><!-- imagen oculta que se quiere mostrar en el
rollover -->
</a>
</div>
.img1, .img2 { width: 100%; height: 100%; display: block; position:
absolute; top: 0; left: 0; }
.roll a .img1 { z-index: 0; }
.roll a .img2 { z-index: 1; }
.roll a:hover .img1, .roll a:focus .img1 { z-index: 1; }
.roll a:hover .img2, .roll a:focus .img2 { z-index: 0; }
De esa manera además cubres el acceso con teclado, que de otro modo no
se activaría si el usuario navega con el tabulador.
Saludín,
Ramón.
Jairo Ochoa escribió:
> Aunque la imagen no puede ir dentro del H2 ya que está presente
> antes de que se muestre el H2 y queda debajo, tapada por el
> background/mascara del H2
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
