Question

我正在试图弄清楚如何使用鼠标悬停功能将div的颜色更改为随机颜色，但是我无法找到关于我需要更改以使其发生的明确答案。有任何想法吗？这是我原来的剧本。

$(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

在mouseout功能中，您可以为rgb颜色生成三个随机值。

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

fiddle

Answer 2

我编辑了你的小提琴。这是解决方案：

$(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 3

你想要这样的东西：

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

过渡效果应该可以通过CSS过渡来实现。

16777216是16 ^ 6，值的范围由6位十六进制表示。 toString（16）将十进制值转换为十六进制。

<强> 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 4

您还没有尝试过为div提供背景颜色

这是我的代码 -

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

检查demo here

当鼠标悬停在div的网格上时随机颜色发生变化

4 个答案: