Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

Javascript: simular hover en Internet Explorer 6 con Prototype

Se trata de un sencillo script que nos permitirá evitar el problema de Internet Explorer 6 con la pseudo-clase :hover. Dicha pseudo-clase se puede aplicar a cualquier elemento, para que al pasar el puntero por encima puedan cambiarse los estilos, pero Internet Explorer 6, en su línea habitual, solo lo acepta en elementos de enlace.

Este sería el script, preparado para hacer el hover sobre cualquier elemento con la clase hacer-hover:

document.observe("dom:loaded", function() {
 if(/MSIE 6.0/i.test(navigator.userAgent)) {
  var hover1 = new HoverIE6();
   hover1.op = {
    selector: '.hacer-hover',
    claseHover: 'hover'
   }
   hover1.inicia();
 }
}); 

function HoverIE6 () {
 this.op = {
  selector: '',
  claseHover: ''
 }
 
 this.inicia = function () {
  var that = this;
  
  $$(that.op.selector).each(function (el) {
   el.observe('mouseover',function () {
    el.addClassName(that.op.claseHover);
   });
   
   el.observe('mouseout',function () {
    el.removeClassName(that.op.claseHover);
   });
  });
 }
}

El script añade la clase hover a los elementos sobre los que se quiere el efecto cuando pasa el puntero por encima.

Ver ejemplo funcionando.

Publicado

Categorías: