javascript - 在每个悬停事件上生成随机 Logo 颜色

Question

我正在为一个 friend 做一个网站，我目前正在处理社交网络元素。

我想到了一个想法，每当用户将鼠标悬停在社交网络图像上时，它会随机将背景颜色(每次悬停时)更改为其公司 Logo 颜色之一。

这是我的第一个元素，我试图向 future 的雇主展示我可以在编码中使用函数、数组、条件和对象。

这是我的代码

HTML:

<section id="social">
<ul>
<li><i aria-hidden="true" class="fa fa-facebook-square fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-instagram fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-twitter-square fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-youtube-square fa-3x"></i></li>
</ul>
</section>

JQUERY/JS:

$(document).ready(function(){

    logoColors = [
    rgb(182,131,0),
    rgb((118,0,96),
    rgb(0,85,88),
    ];

    randomCol = Math.floor(Math.random() * 2);

    $("#social li").hover(function(){
        $(this).css("background-color", logoColors[randomCol]);

    })



});

Answer 1

也许你可以试试这个:

1. 我已经定义了 mouseover 和 mouseout 事件
2. mouseover 设置随机背景，mouseout 恢复为 原创
3. 原始/初始颜色保留在变量中
4. 完成函数内部颜色的随机化

除此之外还有一些错误，例如 logoColor 数组中的杂散括号，为了避免此类问题，请在 JsLint 中验证您的 JavaScript 代码

$(document).ready(function(){

    //logoColors = [rgb(182,131,0),rgb((118,0,96),rgb(0,85,88)];
    var initialCol = $("#social li").css('background-color');
    var colors = ["#CCCCCC","#333333","#990099", "#1295A6", "#FFFF99"]; 

    

   // $("#social li").hover(function(){
       // randomCol = Math.floor(Math.random() * 2);
       // $(this).css("background-color", logoColors[randomCol]);

    //});
    
    $("#social li").hover(function() { //mouseover
    var col = Math.floor(Math.random()*colors.length);
    $(this).css('background-color',colors[col]);

}, function() { //mouseout
    $(this).css('background-color',initialCol);

});



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<section id="social">
<ul>
<li><i aria-hidden="true" class="fa fa-facebook-square fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-instagram fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-twitter-square fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-youtube-square fa-3x"></i></li>
</ul>
</section>