Take the 2-minute tour ×

I want to change the background color of the page when one hovers over a button/div tag using only CSS3 transitions. I want the color to come gradually and hence would like to use a transition effect, but I don't know how to relate the background color of the page to a hover event on a div. Can someone please help me with my code ? Thank You

share|improve this question
I don't think it's possible with CSS only. –  MarcinJuraszek Mar 18 '12 at 15:36
add comment

2 Answers

up vote 1 down vote accepted

This is not currently possible in CSS3.

In the future (CSS4?), you'll be able to do it as follows:

body {
    background-color: red;
    transition: background-color 1s ease;

$body #theButton:hover {
    background-color: green;

Note the $ in the second selector; It indicates which element the CSS block applies to. Unfortunately, there's not even a single implementation of this yet, so you'll have to resort to Javascript (which I assume you know how to do. If not, just ask).

Update (using jQuery):


​body {
    background: red;
    transition: background-color 1s ease;
body.hover {
    background: green;


}, function(){

Here's the fiddle: http://jsfiddle.net/mWY88/1/

For maximum efficiency, you should cache your selectors.

share|improve this answer
Ohh thats pretty cool, haven't seen that before. Yes then please help me out with the javascript for this. Thanks a lot. –  Noel Mar 19 '12 at 7:11
@Ash1995 - are you using jQuery? That would make things a lot easier. –  Joseph Silber Mar 19 '12 at 14:03
I am learning jQuery so as long as it is simple I will be able to understand it. –  Noel Mar 19 '12 at 15:46
@Ash1995 - I provided you with a very simple example - shouldn't be too hard. –  Joseph Silber Mar 19 '12 at 18:16
add comment

In fact, you can change the body background-color very easily with CSS3 transition animation like I'm doing it here. I got the logic from here.

share|improve this answer
add comment

Your Answer


