最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Generate random color on hover - Stack Overflow

programmeradmin1浏览0评论

I am trying to generate a random color every time I hover over my box. Now, it will only generate a random color one time.

Here is my Jquery: ;togetherjs=uB54KHo5BN

This is my code so far:

$(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);
    });

});

I am trying to generate a random color every time I hover over my box. Now, it will only generate a random color one time.

Here is my Jquery: https://jsfiddle/Mulk/q0hxw0yd/#&togetherjs=uB54KHo5BN

This is my code so far:

$(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);
    });

});
Share Improve this question edited Jul 3, 2016 at 23:30 Tom 7,7401 gold badge26 silver badges49 bronze badges asked Jul 3, 2016 at 23:05 user3251123user3251123 671 silver badge9 bronze badges 3
  • 3 You have to put the code that generates the color inside the event handler – adeneo Commented Jul 3, 2016 at 23:09
  • 2 out of curiosity why (255 -0) + 0 why not only 255? – Imran Ali Commented Jul 3, 2016 at 23:11
  • @ImranAli I agree with You. Nobody is mentioning this moment. So it's very sad that new generation of "developers" does not know elementary math. That's a shame! – num8er Commented Jul 3, 2016 at 23:53
Add a ment  | 

4 Answers 4

Reset to default 5

You just need to put the color generation INSIDE the hover() function, so that it generates a new color on each hover event: https://jsfiddle/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);
  });
});

Also: as users have mented, (255 - 0) + 0 is equivalent to 255... not sure why that was in the original code!

Here you are:

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

This help you :

<html>
    <head>
    </head>
    <body>
        <div id="container">This is Div</div>
        <script src="https://ajax.googleapis./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>

Check this 2 code examples that handles mouse events and changes both background and text colors to make it readable some ridiculous colors:

<style>
  #container {
    width: 300px; height: 300px;
    text-shadow: 1px 0px 1px rgba(255, 255, 255, 1);
  }
</style>
<script src="https://ajax.googleapis./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>

<style>
  #container {
    width: 300px; height: 300px;
    text-shadow: 1px 0px 1px rgba(255, 255, 255, 1);
  }
</style>
<script src="https://ajax.googleapis./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>

发布评论

评论列表(0)

  1. 暂无评论