title: Change <body> background image on <div> hover
body: <p>So let's say I have a black/white background-image on the body tag, and I want it to switch to a <em>background-image</em> image of a city skyline while hovering over div id="1", and a background-image of the same skyline at night while hovering over div id="2". How would I go about that?</p>
  
  <p>I have some html/css written for this already, as well as 'decent' python knowledge, but no experience with scripting languages such as javascript. I prefer not to copy large snippets of code, as I'm new and want to learn.</p>
  
  <p>Here's what I have so far:</p>
  
  <pre><code>/*css*/
  
  #bg{background:url('a');
  }
  
  #header{
    position:absolute;
    border:double 30pt;
    width:95%;
    height:15%;
  }
  
  #header img{height:120px;
  }
  
  #header img:hover{
    transform: rotate(-10deg);
  }
  
  #allies{
    border:double 30pt;
    position:relative;
    width:45%;
    top:250px;
  
  }
  
  #allies:hover ~ #bg{background:url('b');
  }
  
  #enemies{
    border:double 30pt;
    position:relative;
    width:45%;
    /*top:55px;*/
    top:-67px;
    left:967px;
  }
  
  #enemies:hover ~ #bg{background:url('c')
  }
  
  div img{
    width:120px;
    height:100px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    padding-bottom:5px;
  }
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;AE&lt;/title&gt;
      &lt;link href="AE.css" rel="stylesheet" type="text/css"&gt;
    &lt;/head&gt;
    &lt;body id="bg"&gt;
      &lt;div id="header"&gt;
        &lt;a href="index.htm"&gt;
          &lt;img src="http://www.iconsdb.com/icons/preview/black/home-5-xxl.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="allies"&gt;
          &lt;img src="http://fontmeme.com/permalink/170203/949c0c2c2c0c34c044b9b45585717a70.png"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="enemies"&gt;
          &lt;img src="http://fontmeme.com/permalink/170203/e8d4db59e876e5c94bd8f072137e33e2.png"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>