Цвет фона не меняется при наведении

Question

Я пытаюсь изменить цвет фона элемента, используя случайные цвета из массива. Есть код:

 $(document).ready(function(){

var randomColors = ['#00eeff','#fcff00','#9600ff'];
var rndNum = Math.floor(Math.random() * randomColors.length);

$("div.anyclass").hover(
        function() {
 $(this).css({'background-color' : 'randomColors[rndNum]'}) 
 }, 
        function() {
 $(this).css({'background-color' : '#fff'});
        });
});

Так, это не работает, в чем проблема?

Answer 1

Вам необходимо удалить кавычки из 'randomColors[rndNum]', иначе это будет просто строка:

$(this).css({'background-color': randomColors[rndNum]}) 

ИЛИ

$(this).css({backgroundColor: randomColors[rndNum]}) 

Answer 2

Изменить эту строку:

$(this).css({'background-color' : 'randomColors[rndNum]'}) 

к этому:

$(this).css({'background-color' : randomColors[rndNum]}) 

Переменная не будет раскрыта, если она находится внутри строки.

Answer 3

Вам просто нужно удалить кавычки, например:

$("div.anyclass").hover(function() {
   $(this).css({'background-color' : randomColors[rndNum]}) 
}, function() {
   $(this).css({'background-color' : '#fff'});
});

В настоящее время он пытается установить строку как точно 'randomColors[rndNum]', а не значение этой записи в массиве, например '#00eeff'.