CODEWITHSUNDEEP
css
sdnr1
sdnr1

Reputation: 307

Change body bgcolor on hovering a div, using CSS only

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

Upvotes: 7

Views: 20938

Answers (4)

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: -2

Tymek
Tymek

Reputation: 3113

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

Upvotes: 12

VJS
VJS

Reputation: 1017

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

Upvotes: 1

Sky5005e
Sky5005e

Reputation: 79

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>

Upvotes: 1

Related Questions