Come assegnare un colore in modo randomizzato all'effetto hover

Question

Non ho mai visto un effetto hover come questo prima, e sto cercando di capire come è stato realizzato. Noterai in this example, che quando un utente passa su un link, il colore che il link gira può essere uno qualsiasi dei 5 colori assegnati nel foglio di stile (vedi sotto) a caso. Come si crea questo effetto hover? Può essere fatto puramente con i 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

Il pezzo chiave del codice jQuery viene caricato nel piè di pagina.

Si prega di prestare attenzione al commento degli autori sulla sceneggiatura o di cercare lo author's permission di riutilizzarlo.

/* 

    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

Poiché viene introdotto un fattore casuale, non penso che ci sia un modo per farlo esclusivamente con i CSS.

Ecco il mio semplice approccio al problema, utilizzando jQuery.

si può vedere un esempio di lavoro qui: 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]; 
}