-1

I'm trying to get the background of the body to change when a division within is hovered. In reality I want to have the background blurred with a CSS3 transition, but for the purpose of this, just going to get the colour to change

http://jsfiddle.net/5dm6m/

<body>
<div id="x"></div>
<div id="y"></div>
</body>

CSS

body{
    margin: 0 0 0 0;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    background: #0f0;
}

#x{
    height: 100px;
    width: 100px;
    background: #f00;
}

#y{
    height: 100px;
    width: 100px;
    background: #00f;
}

#y:hover body{
    background: #f0f;
}
Joesruddock
  • 77
  • 1
  • 7
  • possible duplicate of [Change body bgcolor on hovering a div, using CSS only](http://stackoverflow.com/questions/14039723/change-body-bgcolor-on-hovering-a-div-using-css-only) – dsgriffin Feb 02 '14 at 18:48
  • Not a duplicate as the solution refers to an adjacent division rather than a parent. – Joesruddock Feb 02 '14 at 18:52
  • Check this http://stackoverflow.com/questions/11940645/change-body-background-image-gradient-on-hovering-other-elements – Milos Miskone Sretin Feb 02 '14 at 18:54

1 Answers1

0

Try this: jsfiddle But i think that you should do it with jQuery better.

$('#y').hover(function(){
    $('body').css('background', '#f0f');
},function(){
    $('body').css('background', '');
});

see on jsfiddle

Milos Miskone Sretin
  • 1,748
  • 2
  • 25
  • 46