使用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> 
... 

希望这有助于:)