Question

我对javascript并不擅长，但认为这样做是可行的，可以使用你的帮助。

我有一个名为.thumbs的div类，在这个div里面是灯箱库的所有缩略图（这些缩略图也是链接）。

图像有填充和边框，因此您可以在填充中看到图像的背景颜色。

我想要一个脚本，它会为每个图像分配一个随机颜色作为背景图像：hover。

我认为最好只在页面加载时分配这些颜色一次，而不是每次图像悬停时都为其指定一个新的随机颜色。

我看了Chad的这个答案，为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>
...

希望这会有所帮助：）

使用Javascript在页面加载时为图像指定随机背景颜色

1 个答案: