Question

使用CSS，我试图在悬停时将每个元素的背景颜色设置为随机颜色：

:hover {
    background-color: "getRandom()";
}

但是，似乎无法在此处调用JavaScript函数。有没有其他方法可行？

以下是我正在处理的页面：http://jsfiddle.net/FwKqq/3/

Answer 1

在你的jQuery代码中：

$("*").hover(
    function(event) {
        $(this).css("background-color", getRandomColor());
    },
    function (event) {
        $(this).css("background-color", "white");
    }
);

（您还应该删除:hover css元素）

示例：http://jsfiddle.net/jqSgq/

Answer 2

试试这个

$(function() {
    $('*').hover(
        function() { $(this).css('background-color', getRandom()); }, 
        function() {$(this).css('background-color', '#FFF');}
    );
});

Answer 3

function changeBackground(color) {
   document.body.style.background = //here apply background colour;
}

在hover事件

中调用此函数

Answer 4

以下是一个工作示例：http://jsfiddle.net/FwKqq/4/

您需要在通话开始时设置背景颜色并以此结束：

$("*").hover(
    function(event) {
        $(this).css('background-color', getRandomColor());
    },
    function (event) {
       $(this).css('background-color', 'white');
    }
 );

Answer 5

纯working example的跨浏览器Javascript：

var bgColor;
var els = document.getElementsByTagName('*');
for (var i = 0; i < els.length; i++) {
    if (document.addEventListener) {
        els[i].addEventListener('mouseover', function (e) {
            e.stopPropagation();
            bgColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            this.style.backgroundColor = bgColor;
        }, false);
        els[i].addEventListener('mouseout', function (e) {
            e.stopPropagation();
            bgColor = '#FFFFFF';
            this.style.backgroundColor = bgColor;
        }, false);
    } else {
        els[i].attachEvent('mouseover', function () {
            e.stopPropagation();
            bgColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            this.style.backgroundColor = bgColor;
        });
        els[i].attachEvent('mouseout', function () {
            e.stopPropagation();
            bgColor = '#FFFFFF';
            this.style.backgroundColor = bgColor;
        });
    }
}

此处的随机背景代码：http://paulirish.com/2009/random-hex-color-code-snippets/

使用JavaScript函数更改CSS中的背景颜色

5 个答案: