होवर प्रभाव पर यादृच्छिक रूप से रंग कैसे असाइन करें

Question

मैंने कभी इस तरह एक होवर प्रभाव कभी नहीं देखा है, और मैं यह समझने की कोशिश कर रहा हूं कि यह कैसे प्राप्त हुआ है। आप in this example, देखेंगे कि जब कोई उपयोगकर्ता किसी लिंक पर हो जाता है, तो लिंक बदलता है रंग 5 रंगों में से कोई भी है जो स्टाइल शीट (नीचे देखें) में यादृच्छिक रूप से असाइन किया गया है। आप इस होवर प्रभाव को कैसे बनाते हैं? क्या यह पूरी तरह से सीएसएस के साथ किया जा सकता है?

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

jQuery कोड का मुख्य भाग पृष्ठ के पाद लेख में लोड किया गया है।

कृपया लिपि पर लेखकों की टिप्पणी पर ध्यान दें, या इसे पुन: उपयोग करने के लिए author's permission खोजें।

/* 

    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

चूंकि एक यादृच्छिक कारक पेश किया गया है, मुझे नहीं लगता कि सीएसएस के साथ इसे पूरी तरह से करने का एक तरीका है।

jQuery का उपयोग करके समस्या का मेरा सरल दृष्टिकोण यहां है।

आपके पास चालू उदाहरण देख सकते हैं: 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]; 
}