Change background color of a div on hover from an array of colors

Question

I am new to jQuery and I am experimenting a bit here. Please be patient.

I am trying to give div's a "random" background color on hover. If the div is not hovered I want them to be white.

I realize that random may not be the right word here because I want the script to chose a color from the following array, preferably in the same order: ['#009c61', '#cc0099', '#cc9900', '#cc0033', '#0099cc', '#6600cc', '#66cc00']

I guess some of the problem is because all divs have the same class.

How can this be achieved with jQuery?

 jQuery(document).ready(function($) { var bgColorArray = ['#009c61', '#cc0099', '#cc9900', '#cc0033', '#0099cc', '#6600cc', '#66cc00'], selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)]; $('.article-container').css('background-color', selectBG) });

 .article-container { color: #000; font-family: 'Oswald', sans-serif; text-align: center; height: 200px; width: 200px; border: solid 3px #000; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="article-container">Div 1</div> <div class="article-container">Div 2</div> <div class="article-container">Div 3</div> <div class="article-container">Div 4</div>

So far I have tried this:

    jQuery(document).ready(function($) {

  var bgColorArray = ['#009c61', '#cc0099', '#cc9900', '#cc0033', '#0099cc', '#6600cc', '#66cc00'],
    selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)];

  $('.article-container').css('background-color', selectBG)

});

Problem is this changes the color on page refresh and it changes the bg color of all divs.

Answer 1

Try to use .hover(mouseInHandler,mouseOutHandler) function at this context,

var colors = ['#009c61', '#cc0099', '#cc9900', '#cc0033', '#0099cc', '#6600cc', '#66cc00'];
$(".article-container").hover(function() {
    $(this).css("background-color", colors[(Math.random() * colors.length) | 0])
}, function() {
    $(this).css("background-color", "")
});

DEMO

Answer 2

Take a look at this

Jquery :

$(document).ready(function()
{
    $("a").hover(function(e)
    {
        var randomClass = getRandomClass();
        $(e.target).attr("class", randomClass);
    });
});

function getRandomClass()
{
     //Store available css classes
     var classes = new Array("green", "purple", "teal", "violet", "pink");

     //Give a random number from 0 to 5
     var randomNumber = Math.floor(Math.random()*6);

     return classes[randomNumber];
}

CSS :

a.green:hover { color: #1ace84; }
a.purple:hover { color: #a262c0; }
a.teal:hover { color: #4ac0aa; }
a.violet:hover { color: #8c78ba; }
a.pink:hover { color: #d529cd; }

Searched on google and got it from Telmo

Answer 3

Cool idea. I just wanted to take a stab at making something pretty.

 var numberOfBlocks= 250; var colors = ['#009c61','#cc0099','#cc9900','#cc0033','#0099cc','#6600cc','#66cc00']; var lastColor = 0; (function init() { var wrap = document.getElementById('wrap'); var block = document.createElement('div'); block.setAttribute('class', 'block'); for(var i=0; i<numberOfBlocks; i++) { wrap.appendChild(block.cloneNode(true)); } $('.block').hover(function() { $(this).css('background-color', colors[lastColor++]) lastColor = (lastColor>=colors.length?0:lastColor); }, function() { $(this).css('background-color', '#fff'); }); })();

 .block { width: 20px; height: 20px; border: 1px solid white; display: inline-block; margin-top: -5px; margin-left: -1px; transition: all .1s ease-in-out; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"> </div>