Foros del Web » Creando para Internet » CSS »

rollover que no va en IE

Estas en el tema de rollover que no va en IE en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/08/2008, 05:30
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 12 años, 7 meses
Puntos: 0
Pregunta rollover que no va en IE

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
  #2 (permalink)  
Antiguo 11/08/2008, 09:28
 
Fecha de Ingreso: noviembre-2006
Mensajes: 437
Antigüedad: 11 años
Puntos: 3
Respuesta: rollover que no va en IE

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!
  #3 (permalink)  
Antiguo 13/08/2008, 03:31
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: rollover que no va en IE

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

Graciassss!
  #4 (permalink)  
Antiguo 13/08/2008, 04:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: rollover que no va en IE

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

Mira este ejemplo a ver si te sirve.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 13/08/2008, 04:05
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: rollover que no va en IE

Hola MikMoro, mi problema es que tengo muchas imágenes y para hacer esto tengo que declarar muchos nombres :(
  #6 (permalink)  
Antiguo 13/08/2008, 06:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: rollover que no va en IE

Si muestras cómo lo haces igual se puede buscar alguna solución.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 13/08/2008, 08:04
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: rollover que no va en IE

HTML

Cita:
<div id="galeriacolor1" class="galeria">
<ul>
<li><img src="1pc.jpg" /></li>
<li><img src="2pc.jpg" /></li>
<li><img src="3pc.jpg" /></li>
<li><img src="4pc.jpg" /></li>
<li><img src="5pc.jpg" /></li>
</ul>
</div>
<div id="galeria1" class="galeria">
<ul>
<li><a href="1g.jpg"><img src="1p.jpg" /></a></li>
<li><a href="2g.jpg"><img src="2p.jpg" /></a></li>
<li><a href="3g.jpg"><img src="3p.jpg" /></a></li>
<li><a href="4g.jpg"><img src="4p.jpg" /></a></li>
<li><a href="5g.jpg"><img src="5p.jpg" /></a></li>
</ul>
</div>
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
  #8 (permalink)  
Antiguo 13/08/2008, 08:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: rollover que no va en IE

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.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 14/08/2008, 01:55
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: rollover que no va en IE

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!
  #10 (permalink)  
Antiguo 14/08/2008, 05:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: rollover que no va en IE

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.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 14/08/2008, 07:00
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: rollover que no va en IE

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!!

  #12 (permalink)  
Antiguo 14/08/2008, 07:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: rollover que no va en IE

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.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:49.