Javascript：在鼠标悬停时将div的背景颜色更改为随机颜色

Question

我对Javascripting相对较新，我知道有关于这种技术的答案，但是我无处可获得所有的部分。

在网页上，我创建了一个10 x 10网格，由100个相同大小的单个div组成。当任何div被鼠标悬停时，我希望它显示随机背景颜色（鼠标悬停在div上，将显示不同颜色的div的踪迹）。

在任何给定的div中，函数“fnPickColor”（创建颜色）以这种方式激活：

onmouseover ="fnPickColor()"

我的问题是：生成了颜色，我不知道如何将它放入调用函数的单个div中。我不能使用“getElementById”或基于标记的引用，因为它们引用特定的单个div或它们的组，而不是当前正在被moused-over的任何div。

我尝试使用“this.style.backgroundColor”来传输颜色，但是失败了。

我确信它非常简单 - 这是怎么做到的？

Answer 1

function rg(m, n) {
    return Math.floor( Math.random() * (n - m + 1) ) + m;
}

function hex(i) {
    return i.toString(16);
}

function randColor() {
    return '#' + hex(rg(1, 15)) + hex(rg(1, 15)) + hex(rg(1, 15)) +
        hex(rg(1, 15)) + hex(rg(1, 15)) + hex(rg(1, 15));
}

$(".subContent").mouseover(function() {
    $(this).css("background-color",randColor());
});

我已创建它的部分，以便您可以重复使用它。希望你会受益。 http://jsfiddle.net/user007/yK7kq/1/

Answer 2

CSS：

.slider {
    width: 300px;
    height: 300px;
    border: 2px black solid;
    cursor:pointer;
    transition: all 0.75s ease-in-out;
}

HTML：

div class="slider" data-bind="style:{'background-color':color}, event:{mouseover:changeColor}"></div>

JavaScript的：

$(function () {
    var attr = {
        color: ko.observable("azure"),
        changeColor: changeColor    
    };

    function changeColor() {
        attr.color("#" + (Math.random() * 0xFFFFFF<<0).toString(16));
        toastr.info(attr.color());
    }

    ko.applyBindings(attr);
})();

演示：

点击：http://jsfiddle.net/samuelbigas/JZ4UX/2/

悬停：http://jsfiddle.net/samuelbigas/JZ4UX/4/

淘汰赛：http://jsfiddle.net/samuelbigas/JZ4UX/7/

Answer 3

onmouseover = fnPickColor(this)

然后在函数内部使用

this.style

编辑我不应该在昨天没有时间详细说明时回答。我想的更像大卫建议的东西。

我忘记了引号

onouseover = "fnPickColor(this)"

我应该澄清你需要在这样的函数中接受这个

function fnPickColor(what) {
    what.style.background = <YOUR RANDOM GENERATED COLOR>
}

你表示你已经有了获得颜色的代码。

Answer 4

HTML：

<div onmouseover="randomColor(this)"></div>

使用Javascript：

randomColor = function(e) {
    e.style.background =  "#" + (Math.random() * 0xFFFFFF<<0).toString(16);
}

http://jsfiddle.net/eptFf/

Answer 5

这是一个很好的例子：Random Color Generator

    function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
var div = document.getElementById( 'colorchange' );
div.onmouseover = function() {
  this.style.backgroundColor = getRandomColor();
  var h2s = this.getElementsByTagName( 'div' );
  var text = document.getElementById('text');
};
div.onmouseout = function() {
  this.style.backgroundColor = 'transparent';
  var h2s = this.getElementsByTagName( 'h2' );
};