Hola,
Quiero hacer lo siguiente: Sobre un banner quiero que al pasar el ratón
aparezca un texto y al quitar el ratón desaparezca de nuevo. Parece un
asunto muy sencillo pero no logro que funcione en todos los navegadores.
Como de costumbre en Firefox, Chrome, Safari y Opera funciona como lo deseo,
pero en Internet Explorer 9, no. Ni siquiera he probado en IE6 debe ser un
desastre.
Hice varias pruebas con diversas estrategias, probé con Javascript, pero
creo que no se justifica usar un scrit para una cosa tan sencilla.
Inicialmente intenté usar la propiedad "visibility", poniéndola en "hidden"
cuando está afuera y en "visible" con el ratón encima, pero no funcionó,
creo yo que al estar oculto (hidden) el elemento no pasa nada cuando se le
ratón encima. Así que consideré otras opciones y elegí cambiar la opacidad.
El código que tengo es el siguiente:
HTML
<div class="completa">
<div id="capa1">
<img src='imagen.jpg' width='968' height='150'
style='height:150px;width:968px;' />
<div id="capa2">
<a href="/" target="_top">Titulo</a>
</div>
</div>
</div>
CSS:
.completa, {
width: 968px;
overflow: hidden;
float: none;
clear: both;
margin: 0;
padding: 0;
}
#capa1{
position:relative;
width:968px;
height:150px;
overflow: hidden;
z-index: 3;
}
#capa2 a, #capa2 a:link, #capa2 a:visited{
position:absolute;
width:918px;
height:150px;
line-height: 150px;
padding-right: 50px;
text-align: right;
top: 0;
left: 0;
color:#FFF;
font-family: Arial, sanserif;
font-size: 3.5em;
z-index: 10;
opacity: .01;
filter: alpha(opacity=1%);
}
#capa2 a:hover, #capa2 a:Active{
opacity: .9;
filter: alpha(opacity=95%);
text-shadow: 0 0 20px #111;
}
--
*Germán Bustos*
Asesor en estrategias de comunicación en Internet para organizaciones
sociales
http://atarraya.org
http://germanbustos.com
Tel: (+57) 3177381339
<http://atarraya.org/>
<http://germanbustos.com/>
<http://www.facebook.com/german.bustos>
<http://twitter.com/kommodin>
<http://www.linkedin.com/in/germanbustos>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
