rollover que no va en IE

tyrula · #1 (**permalink**) 11/08/2008, 04:30

Hola a todos, tengo cargadas unas imagenes en blanco y negro y debajo de estas estan las mismas imágenes pero en color, y lo que hago es que cuando estoy encima de una de bn me la esconde entonces veo la de color que está debajo, en firefox me va perfecto pero en IE no me funciona, este es el código:

Cita:

.galeria a:hover {
filter: alpha(opacity=0);
-moz-opacity: .0;
opacity: .0;
}

Saludos

komodo · #2 (**permalink**) 11/08/2008, 08:28

Hola tyrula. La etiqueta "a" tiene unas medidas definidas? En ie la opacidad solo funciona si le indicas una anchura y una altura. Por ejemplo:

Cita:

.galeria a{ width: 100px; height: 100px;}

.galeria a:hover {
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

También he quitado los puntos delante los zeros.

Un saludo!

tyrula · #3 (**permalink**) 13/08/2008, 02:31

Hola Komodo, acabo de probar esto y sigue sin funcionarme :( alguna sugerencia más???

Graciassss!

Mikmoro · #4 (**permalink**) 13/08/2008, 03:02

Yo te recomendaría cambiar de estrategia y no usar la opacidad para eso.

Mira este ejemplo a ver si te sirve.

tyrula · #5 (**permalink**) 13/08/2008, 03:05

Hola MikMoro, mi problema es que tengo muchas imágenes y para hacer esto tengo que declarar muchos nombres :(

Mikmoro · #6 (**permalink**) 13/08/2008, 05:09

Si muestras cómo lo haces igual se puede buscar alguna solución.

tyrula · #7 (**permalink**) 13/08/2008, 07:04

HTML

Cita:

CSS

Cita:

.galeria{
position:absolute;
width:950px;
height:115px;
left: 77px;
top:336.5px;
}
.galeria ul{
list-style:none;
margin:0 auto;
padding:0px;
}
.galeria ul li{
display:inline;
padding:0 23px;
}
.galeria a{
width: 110px;
height: 110px;
}
.galeria a img {
border:0px;
}
.galeria a:hover {
filter: alpha(opacity=0);
-moz-opacity: .0;
opacity: .0;
}

Como puedes ver tengo unas arriba y otras abajo, si en el hover le pongo visibility=hidden me funciona pero al estar escondido el hover no va bien ya que da saltos.

Saludos

Mikmoro · #8 (**permalink**) 13/08/2008, 07:27

Supongo que te pega saltos porque aunque le estás poniendo un tamaño de alto y ancho a los enlaces, eso no sirve de nada, y el tamaño realmente lo está tomando de las imágenes que tiene incrustadas, que al desaparecer hace que los enlaces queden reducidos a cero.

Añade display:block al selector de los enlaces y creo que se arreglará:

Cita:

.galeria a{
width: 110px;
height: 110px;
display:block;
}

No obstante, sigo pensando que no es la mejor manera de hacerlo, y si intentas validar tu hoja de estilo comprobarás los problemas que te vas a encontrar.

tyrula · #9 (**permalink**) 14/08/2008, 00:55

Hola Mikmoro, lo he probado y no se ha solucionado, a parte, con esto, las imagenes no se me muestran en horizontal sino en vertical. He probado a poner display:inline-block y tampoco :(

Alguna otra sugerencia??

Gracias!

Mikmoro · #10 (**permalink**) 14/08/2008, 04:06

Yo lo haría de esta forma:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tyrula</title>
<style type="text/css">
.galeria{
position:absolute;
width:950px;
height:115px;
left: 77px;
top:336.5px;
}
.galeria ul{
list-style:none;
margin:0 auto;
padding:0px;
}
.galeria ul li{
display:inline;
}
.galeria ul li img {
border:0px;
width: 100px;
height: 100px;
}
.galeria ul li a {
width: 100px;
height: 100px;
display: block;
float:left;
padding:0 23px;
}
.galeria ul li a:hover {
background-color: transparent;
}
.galeria ul li a span {
display: none;
}
.galeria ul li a:hover span {
display: block;
position: relative;
top: -100px;
}
</style>
</head>
<body>
<div id="galeria1" class="galeria">
<ul>
<li><a href="1.jpg"><img src="img/1bn.jpg" /><span><img src="img/1.jpg" /></span></a></li>
<li><a href="2.jpg"><img src="img/2bn.jpg" /><span><img src="img/2.jpg" /></span></a></li>
<li><a href="3.jpg"><img src="img/3bn.jpg" /><span><img src="img/3.jpg" /></span></a></li>
<li><a href="4.jpg"><img src="img/4bn.jpg" /><span><img src="img/4.jpg" /></span></a></li>
<li><a href="5.jpg"><img src="img/5bn.jpg" /><span><img src="img/5.jpg" /></span></a></li>
</ul>
</div>
</body>
</html>

Si no hay nada que te lo impida, para mi es la mejor opción.

tyrula · #11 (**permalink**) 14/08/2008, 06:00

Uffff !!!!!!!!!! Perfectoooooooo !!!!!! Eres un genio!!! Yo estoy empezando ahora con esto del css, siempre he hecho mis páginas en flash, y me había atrancado con esto!!

Muuuuuuchas gracias!!

Mikmoro · #12 (**permalink**) 14/08/2008, 06:36

De nada, es un placer. Cuesta un poco hasta que se le coge el punto a la diferencia entre navegadores, pero luego es muy divertido.

Saludos.