Código:
Imagen, posicion absoluta:<div id="galeria-thumbs"> <ul id="lista-galeria"> <li><a href="#"><img src="imagenes/galeria/alpine sunset.JPG" alt="Alpine Sunset" /><span>Alpine Sunset</span></a></li> </div>
Código:
Descripcion de la imagen (<span>), posicion absoluta:#lista-galeria li a img { position: absolute; top: 640px; display: none; right: 80px; height: 440px; width: 580px; left: 462px; bottom: 0px; text-align:center; border: 1px solid #999; padding: 10px; float: right; }
Código:
El problema es que cuando trato de darle estilo al atributo <a> simplemente no pasa nada, actualmente muestro la imagen grande y la descripcion de la siguiente manera:#lista-galeria li a span { display:none; position: absolute; left: 473px; top: 590px; width:580px; text-align:center; color: #036; font-size: 120%; background-color: #F2FCE0; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #6FA010; border-bottom-color: #6FA010; }
Código:
Pero esto muestra la imagen al colocar el mouse sobre la imagen pequeña, si quiero mostrar la imagen al click de la siguiente manera no pasa nada:#lista-galeria li:hover img, #lista-galeria li:hover a span { display:block; }
Código:
No es solo el valor "active" sino cualquiero (focus, hover), simplemente no funciona si manipulo el elemento <a>.#lista-galeria li a:active img, #lista-galeria li a:active span { display:block; }
Que puede estar pasando? Gracias.