La secuencia de comandos para cambiar los colores del texto al pasar el mouse funciona en Firefox pero no en otros navegadores

Tengo el siguiente script que asigna aleatoriamente diferentes colores (de una matriz) a letras en un DIV y cambia estos colores al pasar el mouse. Se supone que la secuencia de comandos vuelve a cambiar los colores cuando el mouse abandona el DIV (es decir, cuando no se desplaza). Lo está haciendo en Firefox, pero no en otros navegadores (Safari, Chrome e IE). Además, la función de clic tampoco funciona correctamente en estos navegadores (de nuevo, sí lo está en Firefox).

Puedes ver el guión en acción. aquí.

Me pregunto si alguien puede ayudar a solucionar este problema.

Gracias,

Nick

$(document).ready(function() {
  var test = $("#example p").text().split('');

    var normal = generateColors(test);
    var hover = generateColors(test);
    $("#example p").html(normal);

    $("#example").hover( 
      function(event) { $("#example p").html(hover) }, 
      function(event) { $("#example p").html(normal) });

    $("#example").click(function() { 
    location.href = "http://www.google.co.uk"; 
    });

});

function generateColors(characters) {
    var result = "";
    var i = 0;
    for(i=0; i < characters.length; i++) {
        result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span>";
    }

   return result;
}        

function getColor() {
    var colList = ['#7EA404', '#14AFB0','#B05718', '#B0A914', '#B01617','#902BB0', '#B003A2', '#4A429C','#33821E', '#226795', '#D0B600','#886833'];

    var i = Math.floor((Math.random()*colList.length));
  return colList[i];
}

preguntado el 03 de mayo de 12 a las 15:05

Funciona bien aquí en FF12, Chrome 18, IE9, Safari 5.1.5 y Opera 11.51 -

De acuerdo, mirando su página de ejemplo, parece tener algo que ver con el font-face. Deberías incluir eso en tu pregunta. Si elimina la fuente, funciona bien. -

Mmmh, ¿puede tener algo que ver con la computadora que estoy usando (una Mac?) - Estoy usando las últimas versiones de los navegadores -

@Nick estoy usando una Mac, y funciona bien para mí en Chrome y Firefox.

1 Respuestas

El problema parece ser que no siempre detecta el evento mouseleave cuando se desplaza sobre el texto. La solución más simple es agregar relleno al div para que haya espacio entre el texto y el borde del contenedor. Violín

contestado el 03 de mayo de 12 a las 16:05

¡Hurra! Eso parece arreglarlo. Haré un poco más de pruebas antes de confirmar. Nick

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.