title: change body background image/gradient on hovering other elements
body: <p>I'm trying to change the background image/gradient of the body while hovering on a div (id="above"), I follow the way they do in another post (http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements) but it doesn't seems to work</p>
  
  <p>css</p>
  
  <pre><code>body {
      background: -webkit-gradient(radial, ...);
  }
  
  .about:hover body{
      background: -webkit-gradient(radial, ...); // new gradient
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="about"&gt;
          &lt;h1 id="title"&gt;About&lt;/h1&gt;
          &lt;div&gt;
              &lt;p id="about"&gt;stuff&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This has no effect, I even try to test if this works by changing the title style to italic while hovering, still no use</p>
  
  <pre><code>.about:hover h1.title {
      font-weight: italic;
  }
  </code></pre>
  
  <p>Is that the way I use it is wrong or there is something else, anyone can help?</p>