JMiur [E]

Si se utiliza Firefox, los efectos rollover son simples de implementar y pueden utilizarse sobre cualquier elemento, en cambio, si se utiliza Internet Explorer, sólo funcionarán sobre la etiqueta <A>:

ESTE EFECTO FUNCIONA EN CUALQUIER NAVEGADOR
     CSS
a.demoIE1:hover {color:#FF0000;font-family:monospace;}

HTML
<a class="demoIE1" href="http://www.google.com.ar/">FUNCIONA</a>

ESTE EFECTO NO FUNCIONA EN CUALQUIER NAVEGADOR
     CSS
img.demoIE2:hover {border:2px solid #FF0000;padding:5px;}

HTML
<img class="demoIE2" src="URL_imagen" /> NO FUNCIONA

Esta incapacidad que ni el nuevo IE7 ha resuelto, nos impide utilizar la mayoría de los pseudo-elementos:

COMO ESTE que muestra un texto extendido.
     CSS
.demo1[title]:after{content: "";}
.demo1[title]:hover:after{content:attr(title) "(muy bonito)";}

HTML
<span class="demo1" title=" EFECTO">COMO ESTE</span>
que muestra un texto extendido.

O este otro que utiliza el pseudo-elemento content:

VAGABUNDIA
     CSS
span.demo2:before{content: "";}
span.demo2:hover:before{content: url("URL_imagen") " ";}

HTML
<span class="demo2">VAGABUNDIA</span>

lamentablemente, ni siquiera los efectos más simples han sido implementados:






     CSS
td.demo3:hover{background-color:#FF7777; padding:50px;}

HTML
<td class="demo3"> ....... </td>

Para simular este tipo de efectos en Internet Explorer debemos emplear otros métodos. La forma más sencilla es hacer uso de la propiedad className que permite leer o establecer la clase (class) de un objeto:

<ETIQUETA CLASS = nombre_clase ... >
o bien
objeto.className=nombre_clase;







     CSS
.celdano {background: none;}
.celdasi {background-color:#FF7777; padding:50px;}

HTML
<td class="celdano"
onmouseover="className='celdasi'"
onmouseout="className='celdano'"> ....... </td>
Usamos dos clases diferentes, una contiene las propiedades "normales" del elemento y, la segunda, las propiedades del "rollover".

Mediante el evento onmouseover, verificamos cuando el cursor está sobre elemento y, cambiamos su clase (className='celdasi'). Para restaurar todo, cuando se ejecuta el evento onmouseout, volvemos a cambiar su clase (className='celdano'), restaurándola a la que tiene por defecto.

17 comentarios:

Oscar  

Me has salvado la vida :) maldito explorer...

Responder
JMiur  

Me alegro mucho ... y si, MALDITO IEXPORER :D

Responder
Anónimo  

También yo acabé de rebote en tu blog, y tu solución me ha servido para arreglar un :hover sobre una etiqueta span que me traía de cabeza.

Mil gracias.
Te pongo en mi lector de feeds ;-)

Responder
Anónimo  

Muchísimas gracias!!!
Vaya asco de explorer

Responder
JMiur  

Espero que haya servido y que alguna vez todos se pongan de acuerdo para unificar las reglas y aliviarnos el trabajo.

Responder
pixow  

bueno, y además sigue estandares XHTML. Me gusta la solucion. así nos ahorramos de utilizar JAVASCRIPT.

Responder
JMiur  

Gracias por el comentario, a mi también me gusta. Si no la he implementado en Blogger es porque son perezoso pero la utilicé en WordPress y funciona perfectamente.

Responder
Anónimo  

Muchas gracis, me parece genial la solución

Responder
fyrwet  

He utilizado el hover para hacer que los enlaces de mi blog se pongan en negrita cuando se pasa el ratón por encima. Es fácil. Basta con poner esto en el css:

a:hover{
font-weight: bold;
}

Y listo.

Responder
JMiur  

fyrwet: lee el post porque no has entendido.

"si se utiliza Internet Explorer, sólo funcionarán sobre la etiqueta <A>"

Responder
Anónimo  

Joeeer, con razón, yo eliminé todos los onmouseover para ponerlo todo más guay en CSS y luego no me funcionaba nada por el puto IE. Tampoco funcionaban los hover en Firefox pero si en Chrome (el navegador de Google).

Responder
Anónimo  

Gracias tio, despues de una larga busqueda por toda la red, encontre la solucion a mi problema.. saludos y me fue de mucha ayuda.

Responder
aLf  

Chabón, sos un capo. Gracias!!

Responder
Natos  

Genial, siempre quice hacer esto de una manera así de sencilla, por lo general se encuentran complicadas funciones javascript pero esta ha sido la mejor forma que he encontrado.

Te fajaste bacán ! ! !

Responder
JMiur  

En relaidad, en IE8 esto ya es innecesario ya que está agregado por defecto.

Responder
toful  

que grande!

Responder
Johana Rivas  

Muchísimas gracias tu información me ha ayudado muuuucho =D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR