Hola todos :
Amo estos foros. Sé que ya lo había mencionado anteriormente, pero cuando veo mensajes que salen tan redondos lo tengo que repetir. Lo que más lamento es que justo éste arruine la armonía de conjunto...
En fin, me emociono cuando leo respuestas como -por ejemplo- la tuya,
caricatos (
), simple, eficiente y casi lapidaria.
Y no sigo para que nadie piense que me están pagando por decir todo ésto.
Lo que me quedó rebotando entre la oquedades de mi cerebro fueron el código y el comentario de
tunait () y
RoQ () respectivamente.
Sin ánimo de comenzar una polémica, estoy convencido de que el CSS no es un lenguaje por sí mismo. Será un gran auxiliar de diseño, pero siempre como complemento de -p.e.- el HTML ( que ,como su sigla lo indica, sí es un lenguaje ).
Hace un tiempo leí un mensaje que terminó de acomodar las fichas con respecto a mis dudas con el CSS y su avance sobre el HTML; y es que tendrá que seguir evolucionando hasta convertirse en algo como un 'CSSScript' para despegar y ser verdaderamente eficiente.
Pero no nos divaguemos. El
hover para otros elementos además del
anchor es algo que el
Internet Explorer va a tener que adoptar si no quiere seguir perdiendo terreno. Pero mientras no lo haga ( y aún así, no "parchará" las versiones anteriores ) es totalmente cierto que cualquier código debe funcionar primero en
IE ( versiones
5 a
7 inclusive ), y después en los demás navegadoes ( la prioridad la pone cada diseñador, mi humilde sugerencia es
Firefox (
Mozilla),
Opera,
Safari,
Konqueror...).
Vamos por fin al asunto. Este código lo hice hace mucho, pero está en varias páginas y creo que también lo vi en este foro. Seguramente habrá que hacerle algunos ajustes para que trabaje en los últimos
IE y los demás navegadores con cada DTD, o simplemente buscar uno que esté mejor hecho.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.alfa{position:relative; width:14px; height:16px; }
A:link.bravo , A:active.bravo , A:visited.bravo{position:absolute; border:none; background:white url("http://www.forosdelweb.com/images/icons/icon3.gif") no-repeat center ; text-decoration:none; padding:1px; width:14px; height:16px; }
A:hover.bravo{background: white url("http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif") no-repeat center; width:207px; height:108px}
</style>
</head>
<body>
<span class="alfa">
<a href="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" title="imagen" alt=imagen" class="bravo"> </a></span>
Hecho con hover; imagen background.
<p>
El texto queda oculto al aumentar el tamaño de la imagen.</p>
</body>
</html>
El primer inconveniente es que hay que usar 2 imágenes. El segundo es la cantidad de ajustes 'precisos' que lleva el CSS. Al expandirse la imagen, cubre parte del documento; de otra forma nos desarmaría el diseño, claro.
saludos
furoya
p.d. : Hey!; tu código sí funciona en
IE,
tunait .Eso me pasa por escribir antes de mirar bien y probar. Por el comentario posterior quedé convencido de que aplicabas el
hover a la imagen.
Debería borrar todo el mensaje, pero lo voy a dejar como recuerdo de mi oprobio.