Letras que cambian de color al pasar el cursor

Ya hemos visto en este mismo blog muchas tecnicas para aplicar al texto, bien sean sombras, animaciones, parpadeos de colores, etc... Pues bien, en este caso, vamos a ver como aplicando un poco de Javascript combinado con CSS, no solo conseguimos que cada letra sea de un color diferente, sino que al pasar el cursor sobre cada una de ellas, estas cambien de color independientemente.

Aqui debajo tienes el ejemplo, pasa el raton por las letras y observaras este efecto camaleonico:

Si te ha gustado y quieres ponerlo en tu blog o web, copia el siguiente codigo y pegalo donde tu quieras. Lo que esta resaltado en color verde es el tamaño de la fuente, lo que esta en azul son los codigos HEX de los colores utilizados y donde esta en color rojo, sustituyelo por el texto que quieras poner.

ver codigo

<div style="font-size:60px;cursor:pointer;font-weight:bold;font-family:Arial Black;text-shadow:-2px 2px 2px #333333;"><script>
//Colores utilizados en el texto
var colors=new Array('#3498db','#e74c3c','#2ecc71','#e67e22','#1abc9c','#f1c40f','#2BB4E1','#7A7B7A');


function printCSS(){
    document.write('<style>');
  
    for(var i=0;i<colors.length;i++){
        document.write('.color-'+i+'{color:'+colors[i]+'}');
    }
  
    document.write('</style>');
}



function generateText(text){
    for(var i=0;i<text.length;i++){
        var rnd=Math.floor(Math.random()*colors.length);
  
        document.write('<span id="letter-'+i+'" class="color-'+rnd+'" onmouseover="changeColor(this.id)">');
        document.write(text[i]);
        document.write('</span>');
    }
}



function changeColor(el){
    el=document.getElementById(el);
    var rnd=Math.floor(Math.random()*colors.length);
 
    while(el.className=='color-'+rnd){
        rnd=Math.floor(Math.random()*colors.length);
    }
 
    el.className='color-'+rnd;
}


printCSS();
generateText('ESCRIBE TU TEXTO AQUI');
</script></div>