Change background color in CSS using a JavaScript function

Question

Using CSS, I'm trying to set the background color of each element to a random color on hover:

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

However, it doesn't appear to be possible to put a JavaScript function call here. Is there any alternative approach that would work?

Here's the page I'm working on: http://jsfiddle.net/FwKqq/3/

You can't use JavaScript within CSS like that. What is your question? — zzzzBov
– zzzzBov, Commented Apr 20, 2013 at 4:15
@zzzzBov I'm trying to set an element's background color to the output of getRandom(), which returns a random color. — Anderson Green
– Anderson Green, Commented Apr 20, 2013 at 4:25

Andrew Clark · Accepted Answer · 2013-04-20 04:18:29Z

1

In your jQuery code:

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

(You should also remove the :hover css element)

Example: http://jsfiddle.net/jqSgq/

answered Apr 20, 2013 at 4:18

Andrew Clark

210k36 gold badges285 silver badges310 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tamil Selvan C · Accepted Answer · 2013-04-20 04:22:33Z

1

Try this

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

answered Apr 20, 2013 at 4:22

Tamil Selvan C

20.3k12 gold badges55 silver badges72 bronze badges

Comments

PSR · Accepted Answer · 2013-04-20 04:15:45Z

0

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

call this function in hover event

answered Apr 20, 2013 at 4:15

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

Benjamin Kaiser · Accepted Answer · 2013-04-20 04:19:25Z

0

Here is a working example: http://jsfiddle.net/FwKqq/4/

You need to set the background-color when the call starts and ends like this:

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

answered Apr 20, 2013 at 4:19

Benjamin Kaiser

2,24723 silver badges24 bronze badges

Comments

Alex W · Accepted Answer · 2013-04-21 20:55:35Z

Pure cross-browser Javascript with working example:

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;
        });
    }
}

Random background code from here: http://paulirish.com/2009/random-hex-color-code-snippets/

Collectives™ on Stack Overflow

Change background color in CSS using a JavaScript function

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related