使用Javascript爲頁面加載時的圖像分配隨機背景顏色

Question

我對JavaScript不太好，但認爲這是可行的，可以使用你的幫助。

我有一個名爲.thumbs的div類，並且這個div裏面都是一個lightbox庫的縮略圖（這些縮略圖也是鏈接）。

圖像具有填充和邊框，因此您可以在填充中看到圖像的背景色。

我想要一個腳本，它將五個隨機顏色分配爲這些圖像中的每一個的背景圖像：hover。

我認爲這是最好的，如果這些顏色只在頁面加載時分配一次，而不是每次圖像懸停時分配一個新的隨機顏色。

我看了一下乍得的這個答案，爲div類指定了隨機顏色，但即使它是有意的，我也無法讓它工作，儘管jsfiddle看起來不錯。我敢肯定，在我的一端有奇怪的事情發生.. many divs with same class - different background

任何幫助非常感謝！謝謝！

Answer 1

基於您的評論，你可以做到這一點，像這樣（此代碼還需要jQuery的）：

<style> 
    .color-1 a img:hover{background-color:red;} 
    .color-2 a img:hover{background-color:blue;} 
    .color-3 a img:hover{background-color:green;} 
    .color-4 a img:hover{background-color:yellow;} 
    .color-5 a img:hover{background-color:orange;} 
</style> 

<script> 
    $(function(){ // this is a shortcut for "on document ready" 
     // For each element with the class thumb we find: 
     $('.thumb').each(function(){ 
      // add random class to assign the color 
      $(this).addClass('color-' + (Math.floor(Math.random() * 5) + 1)); 
     }); 
    }) 
</script> 
... 

希望這有助於:)