Случайное изменение цвета, когда мышь нависает над сеткой divs

Question

Я пытаюсь понять, как изменить цвет divs на случайный цвет с помощью функции mouseover, однако я не могу найти четкого ответа на то, что я необходимо изменить, чтобы это произошло. Есть идеи? Вот мой оригинальный сценарий.

$(document).ready(function() { 
    for (var i = 0; i <= 128; i++) { 
     $('<div />', { 
      'class': 'sameDiv', 
      'id': 'div' + i 
     }).appendTo('body'); 
    } 
}); 

$('.sameDiv').mouseover(function() { 
    $(this).stop(true).fadeTo(200, Math.random()); 
}).mouseout(function() { 
    $(this).fadeTo(200, Math.random()); 
}); 

http://jsfiddle.net/smugfox/7vx3W/3/

Answer 1

Я отредактировали скрипку. Вот решение:

$(document).ready(function() { 
    for (var i = 0; i <= 128; i++) { 
     $('<div />', { 
      'class': 'cell', 
       'id': 'div' + i 
     }).appendTo('body'); 
    } 
}); 

$('.cell').mouseover(function() { 
    var randomColor = '#' + (function co(lor){ return (lor += 
    [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)]) 
    && (lor.length == 6) ? lor : co(lor); })(''); 
    $(this).css("background-color", randomColor); 
}); 

Here is the fiddle!

Answer 2

Вы хотите что-то вроде этого:

$('.cell').mouseover(function() { 
    var randomColor = '#' + Math.floor((Math.random() * 16777216)).toString(16); 
    $(this).css("background-color",randomColor); 
}); 

Эффект перехода должна быть достижима с помощью перехода CSS.

16777216 - 16^6, диапазон значений, обозначаемый шестизначным шестнадцатеричным. toString (16) преобразует десятичное значение в hex.

ETA:

Для корректности, это должны учитывать ведущие нули, когда сгенерированное значение является очень низким. В противном случае некоторые цвета с нулевым нулевым значением (0A6E7A) заменяются цветами конечного нуля (A6E7A0).

$('.cell').mouseover(function() { 
    var randomColor = "0" + (Math.floor((Math.random() * 16777216)).toString(16)); 
    $(this).css("background-color","#" + randomColor.substr(randomColor.length - 6)); 
}); 

Answer 3

В вашей mouseout функции, вы можете создать три случайных значения для rgb цвета.

$(this).css("background","rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")") 

fiddle

Answer 4

Вы не пробовали давать цвет фона Div

Вот мой код -

$('.cell').mouseover(function() { 
    var randomColor ='#'+ ('000000'+(Math.random() * 0xFFFFFF<<0).toString(16)).slice(-6); 
    $(this).css("background-color",randomColor); 
}); 

Проверить demo here