Question

我正在为朋友做一个网站，我目前正在研究社交网络元素。

我想出了一个想法，即每当用户将鼠标悬停在社交网络图片上时，它会随机将背景颜色（在每个悬停时）更改为其公司徽标颜色之一。

这是我的第一个项目，我试图向未来的雇主展示我可以在编码中使用函数，数组，条件，对象。

这是我的代码

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

可能你可以试试这个：

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

除此之外，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>

Answer 2

编辑JS

$(document).ready(function(){

        var defaultColor = "white";
        var logoColors = [
          'rgb(182,131,0)',
          'rgb(118,0,96)',
          'rgb(0,85,88)',
          'rgb(155,0,44)',
          'rgb(80,85,88)',
          'rgb(118,50,96)',
          'rgb(40,85,88)',
        ];

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

       }, function() {
           $(this).css("background-color", defaultColor);
       });

});

工作JS小提琴：https://jsfiddle.net/79fhdtu2/

Answer 3

修正：

你的rgb颜色声明中有一个括号是额外的。
用双引号取颜色。
Math.Random应该达到3，因为Math.floor（）返回的最大整数 小于或等于 给定的数字。

为了获得额外的效果，在每个链接悬停时更改颜色，您可以在悬停功能中声明randomCol变量。

 $(document).ready(function(){

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

        var randomCol = Math.floor(Math.random() * 3);

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

        })
    });

在每个悬停事件上生成随机徽标颜色

3 个答案: