Change body bgcolor on hovering a div, using CSS only

Question

I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.

---------------EDIT---------------

Actually I was trying this:

body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}

Just show us what have you tried so far.. even it is wrong. I hope you tried something before asking. — Mr_Green, Dec 26 '12 at 11:13
This can be done using only [**CSS**](http://stackoverflow.com/q/1014861/1577396) but it is not [**recommended**](http://css-tricks.com/parent-selectors-in-css/). — Mr_Green, Dec 27 '12 at 05:35

score 12 · Accepted Answer · answered Dec 26 '12 at 11:31

Pure CSS experiment:

http://jsfiddle.net/Tymek/yrKRX/

HTML

<div id="trigger"></div>
<div id="bg"></div>

CSS

body {
    height: 100%;
}

#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    widht: 100%;
    height: 100%;
    z-index: 1;
    background: #EEE;
}

#trigger {
    position: absolute;
    width: 200px;
    height: 136px;
    top: 50%;
    left: 50%;
    margin: -68px 0 0 -100px;
    background: #333;
    z-index: 2;
}

/* KEY */
#trigger:hover ~ #bg {
    background: #EE0;
}

Thank you, for your reply. This css script works!!! Actually i needed one without any javascript and you didi it. — sdnr1, Dec 26 '12 at 11:37

score 1 · Answer 2 · edited Dec 26 '12 at 11:24

1

Please use like this

<html>
   <body>

     <style type="text/css">   

       .top{  
           background:red;
       }

       .top2{   
           background:white;
       }
     </style>

    <div class="top" onmouseover="this.className='top2'" 
                    onmouseout="this.className='top'">Here</div>
  </body>
</html>

edited Dec 26 '12 at 11:24

Mr_Green

40,727
45
159
271

answered Dec 26 '12 at 11:19

Sky5005e

79
5

The background color of the body should change and not that div on which one must hover to change it. – sdnr1 Dec 26 '12 at 11:25
You can use elements in which you want instead of div. – Sky5005e Dec 26 '12 at 11:27

score 1 · Answer 3 · edited Dec 26 '12 at 11:29

1

Use the :hover selector. It seems pretty straight forward unless you are doing something very different.

Check following example for reference:

.classname {
    background-color:white;
 } 

 .classname:hover {
    background-color:red;
 }

edited Dec 26 '12 at 11:29

Mr. Alien

153,751
34
298
278

answered Dec 26 '12 at 11:23

VJS

1,017
9
21

The background color of the body should change and not that div on which one must hover to change it. – sdnr1 Dec 26 '12 at 11:32
After seeing your edited question @Tymek 's answer is the best solution. Please mark it as the correct answer. – VJS Dec 27 '12 at 06:05

Mr_Green · Answer 4 · 2012-12-27T06:25:41.520

Working fiddle

You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).

CSS (with explanation to typos)

body{background: #000;}                /*backgroung (mis-spelled)*/
div{width:100px;                       /*#div (treated as ID)*/
    height:100px;
    border:1px solid black;}

To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).

jQuery

$(document).ready(function(){
    $("div").hover(function(){
        $(this).parent(this).css('background-color','red');
    });

    $("div").mouseleave(function(){
        $(this).parent(this).css('background-color','white');
    });
});

Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

Check this Working fiddle

@Zachdev I know how to do using [**CSS**](http://stackoverflow.com/q/1014861/1577396) but it is not [**recommended**](http://css-tricks.com/parent-selectors-in-css/). BTW, dont just read the title, read the post too. — Mr_Green, Dec 27 '12 at 05:36

Change body bgcolor on hovering a div, using CSS only

4 Answers4

Linked