Simular hover en Internet Explorer

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.