-3

I know this question has been asked before, but I can never seem to find it in the right context.

For my website, I want, upon loading the page, a random colour to be generated (1 of the rainbow). Then, whenever I hover over a div, (it is one that is repeated), that div(s) will become the specified colour.

.shape:hover {
        background-color: green;
        transition-duration: 0.1s;
    }

That's the CSS. The current background colour is green, but that's the property I want to be randomly selected upon the page loading. Thanks.

Payden K. Pringle
  • 61
  • 1
  • 2
  • 19
Daniel Robinson
  • 1

3 Answers3

2

If you include jquery library in your html page then you can do it with jquery easily.

$(function() {
var color_arr = ['red','green','blue']; //add more color in this array
    $(".shape").hover(
    function() {
        $(this).css('background-color', jQuery.rand(color_arr));
    }, function() {
        $(this).css('background-color', '');
    });
});​
(function($) {
    $.rand = function(arg) {
        if ($.isArray(arg)) {
            return arg[$.rand(arg.length)];
        } else if (typeof arg === "number") {
            return Math.floor(Math.random() * arg);
        } else {
            return 1;  // chosen by fair dice roll
        }
    };
})(jQuery);
Subhankar Mitra
  • 177
  • 4
0

The current background colour is green but that's the property I want to be randomly selected upon the page loading

You need to generate a random color at page-load and assigns the same as background-color to element.

Here is an approach using the getRandomColor given in this SO post

document.addEventListener( "DOMContentLoaded", function(){
   document.querySelectorAll( ".shape" ).forEach( function(el){ 
      var randomColor = getRandomColor();
      el.addEventListener("mouseover", function() {
         el.style.backgroundColor = randomColor;
      });
      el.addEventListener( "mouseleave", function(){
        el.style.backgroundColor = defaultBGColor;
      });
   })
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Demo

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".shape").forEach(function(el) {
    var defaultBGColor = el.style.backgroundColor;
    var randomColor = getRandomColor();
    el.addEventListener("mouseover", function() {
      el.style.backgroundColor = randomColor;
    });
    el.addEventListener("mouseleave", function() {
      el.style.backgroundColor = defaultBGColor;
    });
  })
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
.shape {
  width:100px;
  height:100px;
  background-color: black;
}
.shape:hover {
  background-color: green;
  transition-duration: 0.1s;
}
<div class="shape">
</div>
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
0

Using jquery something like this can be done.

$(document).ready(function() {
  var colors = ["#ff0000", "#0000ff", "#00ff00"];
  var rand = Math.floor(Math.random() * colors.length);
  $('.bgcolor').css("background-color", colors[rand]);
  $('div').css("color", colors[rand]);
});
.bgcolor{
  height: 500px;
  width: 500px;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="bgcolor"></div>
</body>
Hash
  • 7,726
  • 9
  • 34
  • 53