Cómo asignar aleatoriamente un color al efecto de desplazamiento

Question

Nunca antes había visto un efecto de desplazamiento como este, y estoy tratando de entender cómo se logra. Se dará cuenta de in this example, que cuando un usuario se desplaza sobre un enlace, el color de los enlaces vueltas puede ser cualquier 1 de 5 colores que se asignan dentro de la hoja de estilo (ver más abajo) al azar. ¿Cómo se crea este efecto de desplazamiento? ¿Se puede hacer simplemente con CSS?

a:hover { 
    color:#1ace84; 
    text-decoration: none; 
    padding-bottom: 2px; 
    border: 0; 
    background-image: none; 
    } 

a.green:hover { color: #1ace84; } 
a.purple:hover { color: #a262c0; } 
a.teal:hover { color: #4ac0aa; } 
a.violet:hover { color: #8c78ba; } 
a.pink:hover { color: #d529cd; } 

Answer 1

La pieza clave del código de jQuery se carga en el pie de la página.

Preste atención al comentario de los autores sobre el guión, o busque el author's permission para volver a utilizarlo.

/* 

    Code below this point is not licensed for reuse, 
    please look and learn but don't steal 

*/ 
var lastUsed; 
function randomFrom(arr){ 
    var randomIndex = Math.floor(Math.random() * arr.length); 
    lastUsed = arr[randomIndex]; 
    return lastUsed; 
} 
color_classes = ['green','purple','violet','teal','pink']; 
function initLinks() { 
    $('#wrap a').hover(function() { 
    new_classes = color_classes.slice(); 

    var index = $.inArray(lastUsed, new_classes); 
    new_classes.splice(index, 1); 

    var classes = $(this).attr('class'); 
    if (classes) { 
     classes.split(' '); 
     $(classes).each(function(i, className) { 
      var index = $.inArray(className, new_classes); 
      if (index>0) { 
       new_classes.splice(index, 1); 
      } 

     }); 
    } 
    $(this).removeClass(color_classes.join(' ')).addClass(randomFrom(new_classes)); 
    }, function() { 
    }); 
} 

Answer 2

Dado que se introduce un factor aleatorio, no creo que hay una manera de hacerlo exclusivamente con CSS.

Aquí está mi enfoque simple al problema, usando jQuery.

se puede ver un ejemplo de trabajo aquí: http://jsfiddle.net/GNgjZ/1/

$(document).ready(function() 
{ 
    $("a").hover(function(e) 
    { 
     var randomClass = getRandomClass(); 
     $(e.target).attr("class", randomClass); 
    }); 
}); 

function getRandomClass() 
{ 
    //Store available css classes 
    var classes = new Array("green", "purple", "teal", "violet", "pink"); 

    //Get a random number from 0 to 4 
    var randomNumber = Math.floor(Math.random()*5); 

    return classes[randomNumber]; 
}