Question

我每次将鼠标悬停在盒子上时都会尝试生成随机颜色。现在，它只会产生一次随机颜色。

这是我的Jquery：https://jsfiddle.net/Mulk/q0hxw0yd/#&togetherjs=uB54KHo5BN

到目前为止，这是我的代码：

$(document).ready(function(){

    var r = Math.floor(Math.random() * (255 - 0) + 0);
    var g = Math.floor(Math.random() * (255 - 0) + 0);
    var b = Math.floor(Math.random() * (255 - 0) + 0);
    var color = "rgb("+r+","+g+","+b+")"

    $("#container").hover(function(){
        $(this).css("background-color", color);
        }, function(){
        $(this).css("background-color", color);
    });

});

Answer 1

您只需将颜色生成INSIDE放在hover（）函数中，以便在每个悬停事件中生成新颜色：https://jsfiddle.net/q0hxw0yd/3/

$(document).ready(function(){
  $("#container").hover(function(){
      var r = Math.floor(Math.random() * 255);
      var g = Math.floor(Math.random() * 255);
      var b = Math.floor(Math.random() * 255);
      var color = "rgb("+r+","+g+","+b+")"
      $(this).css("background-color", color);
  });
});

另外：正如用户评论的那样，(255 - 0) + 0相当于255 ...不确定为什么会出现在原始代码中！

Answer 2

你在这里：

var color =  "#" + Math.random().toString(16).slice(2, 8);

Answer 3

这有助于您：

<html>
    <head>
    </head>
    <body>
        <div id="container">This is Div</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#container").hover(function(){
                var r = Math.floor(Math.random() * 255);
                var g = Math.floor(Math.random() * 255);
                var b = Math.floor(Math.random() * 255);
                 var color = 'rgb(' + r + ',' + g + ',' + b + ')';
                 $(this).css("background-color",color);
                })
                
            });
        </script>
     </body>
</html>

Answer 4

检查这两个处理鼠标事件的代码示例，并更改背景和文本颜色，使其可读出一些荒谬的颜色：

＆＃13;

<style>
  #container {
    width: 300px; height: 300px;
    text-shadow: 1px 0px 1px rgba(255, 255, 255, 1);
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">This div reacts to mouse move</div>

<script>
  $(function(){
    var $container = $('#container');

    $container.mousemove(function(){
      var rgb = [
        parseInt(Math.random() * 255),
        parseInt(Math.random() * 255),
        parseInt(Math.random() * 255)
      ]; // generating array of Red Green Blue numbers (will be used to change background color)
      $container
        .css('background-color', 'rgb(' + rgb.join(',') + ')')
        .css('color', 'rgb(' + [255-rgb[0], 255-rgb[1], 255-rgb[2]].join(',') + ')');
    });
  });
</script>

＆＃13;

<style>
  #container {
    width: 300px; height: 300px;
    text-shadow: 1px 0px 1px rgba(255, 255, 255, 1);
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">This div reacts to mouse move</div>

<script>
  $(function(){
    var $container = $('#container');

    $container.hover(function(){
      var rgb = [
        parseInt(Math.random() * 255),
        parseInt(Math.random() * 255),
        parseInt(Math.random() * 255)
      ];
      $container
        .css('background-color', 'rgb(' + rgb.join(',') + ')')
        .css('color', 'rgb(' + [255-rgb[0], 255-rgb[1], 255-rgb[2]].join(',') + ')');
    });
  });
</script>

＆＃13;

在悬停时生成随机颜色

4 个答案: