Cách gán màu ngẫu nhiên cho hiệu ứng di chuột

Question

Tôi chưa bao giờ thấy hiệu ứng di chuột như thế này trước đây và tôi đang cố gắng hiểu nó đạt được như thế nào. Bạn sẽ nhận thấy in this example, rằng khi người dùng di chuột qua một liên kết, màu sắc liên kết có thể là bất kỳ một trong 1 màu nào được gán trong biểu định kiểu (xem bên dưới) một cách ngẫu nhiên. Làm thế nào để bạn tạo hiệu ứng di chuột này? Nó có thể được thực hiện hoàn toàn vớ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

Mã khóa của mã jQuery được tải ở chân trang.

Hãy chú ý đến các tác giả nhận xét về tập lệnh hoặc tìm kiếm author's permission để sử dụng lại nó.

/* 

    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

Vì một yếu tố ngẫu nhiên được giới thiệu, tôi không nghĩ rằng có cách làm hoàn toàn với CSS.

Đây là cách tiếp cận đơn giản của tôi đối với vấn đề, khi sử dụng jQuery.

Bạn có thể thấy một ví dụ làm việc ở đây: 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]; 
}