Hover en Internet Explorer

Nov 06, 2008

Si hablamos de Internet Explorer (ie6) como navegador válido y funcional, hay ciertos elementos que no admiten cambios en la propiedad hover de CSS. Para tan tremendo bug tenemos una solución sencilla:

<!--[if IE 6]>
<script type="text/javascript">
window.onload=func;
function func(id,estado)
{
   var d = document.getElementById(id);
   if (estado == 1) { d.style.backgroundColor='#B3CDF2'; }
   else { d.style.backgroundColor='#557ab1'; }
}
</script>
<![endif]-->

La función solamente se carga si el navegador es nuestro querido amigo, lo único que hace es cambiar la propiedad backgroundColor del id que hemos pasado como argumento. Dependiendo del estado pone un color u otro, con lo que debemos llamarla según interese en onmouseover o onmouseout:

<ul>
  <li id="li1" onmouseover="func('li1');" onmouseout="func('li1', 1);">
    <a href="#">Un enlace</a>
  </li>
  <li id="li2" onmouseover="func('li2');" onmouseout="func('li2', 1);">
    <a href="#">Otro enlace</a>
  </li>
</ul>

Sencillo y conciso, aunque cada vez tengo menos claro que merezcan la pena todos estos hacks para un pseudo-navegador en desuso.