Plácido, Muchas gracias, ese era truco, funcionó casi perfecto en todos los browsers, Incluso (según el IEtester) en Internet Explorer 5, aunque en el 6 el texto queda siempre visible, en el 5 se oculta como quiero. También en IE 7, 8 y 9, todo con el IE tester que a veces no es 100% seguro, pero es una buena aproximación de cómo funcionaría.
En Firefox, Chrome y Safari tengo el funcionamiento que quería, no importa por que parte del banner pase el ratón, siempre se hace visible el texto. En Opera e IE solo se hace visible cuando paso encima del texto en sí que es un área relativamente pequeña con respecto al total de banner, creo que le voy a poner enlace también a la imagen para solucionar. La otra solución sería usar JavaScript, con lo que tengo menos experiencia y no me siento tan confiado. Muchas gracias Plácido, Germán El 21 de enero de 2011 14:20, Plácido Luna <[email protected]>escribió: > Perdón, donde puse > > #capa2 a:hover, #capa2 a:Active{ > display:block; > width:100%; > opacity: .1; > filter: alpha(opacity=100); > > text-shadow: 0 0 20px #111; > background-color:#333; > } > > debió ser > > #capa2 a:hover, #capa2 a:Active{ > display:block; > width:100%; > opacity: 1; > filter: alpha(opacity=100); > > text-shadow: 0 0 20px #111; > background-color:#333; > } > > Saludos! > > > El 21 de enero de 2011 17:18, Plácido Luna <[email protected] > >escribió: > > > Germán, no uses el signo de % para la opacidad en IE, prueba con esto: > > > > <html> > > <head> > > <style> > > > > .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{ > > display:block; > > width:100%; > > position:absolute; > > > > 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: .1; > > filter: alpha(opacity=10); > > background-color:#333; > > > > } > > #capa2 a:hover, #capa2 a:Active{ > > display:block; > > width:100%; > > opacity: .1; > > filter: alpha(opacity=100); > > > > text-shadow: 0 0 20px #111; > > background-color:#333; > > } > > </style> > > </head> > > <body> > > > > <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> > > </body> > > </html> > > > > Saludos! > > Plácido. > > > > El 20 de enero de 2011 21:53, German Bustos <[email protected] > >escribió: > > > > 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 [email protected] > >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: > >> http://lists.ovillo.org/mailman/listinfo/ovillo > >> > > > > > > > > -- > > *Plácido Luna* > > http://www.octubre.com.uy > > (+598) 99 942723 > > > > > > > -- > *Plácido Luna* > http://www.octubre.com.uy > (+598) 99 942723 > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a [email protected] > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > -- *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 [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
