javascript - JavaScript 関数を使用して CSS で背景色を変更する

Question

CSS を使用して、ホバー時に各要素の背景色をランダムな色に設定しようとしています。

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

ただし、ここに JavaScript 関数呼び出しを配置することはできないようです。機能する代替アプローチはありますか？

ここに私が取り組んでいるページがあります: http://jsfiddle.net/FwKqq/3/

Answer 1

これを試して

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

Answer 2

あなたのjQueryコードで：

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

:hover( css 要素も削除する必要があります)

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

Answer 3

実際の例を使用した純粋なクロスブラウザー 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/

Answer 4

これが実際の例です：http://jsfiddle.net/FwKqq/4/

通話の開始時と終了時に背景色を次のように設定する必要があります。

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