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.

