title: CSS/JS Solution: On hover of child element, change parent div
body: <p>I know CSS is "cascading", but in this case I want the effect to ascend.  I'm open for either a JS or CSS solution, but honestly I'd prefer the solution with the least amount of code or overhead.</p>
  
  <p>When I hover over a (child) letter, I want the entire background color to change for the ENTIRE WINDOW, not just the child element.  Each letter is contained within the parent #word div which fills the whole window (or body).</p>
  
  <p>It would be nice if something like the below existed in css:</p>
  
  <pre><code>#h:hover #word{
      background-color: rgba(0, 102, 0, .5);
  }
  </code></pre>
  
  <p>But it's not working.  Anyone have any ideas??</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="word"&gt;
      &lt;h1&gt;&lt;a id="h" class= "letter" href=#&gt;H&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a class= "letter" href=#&gt;E&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a class= "letter" href=#&gt;L&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a class= "letter" href=#&gt;L&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a class= "letter" href=#&gt;O&lt;/a&gt;&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    body {
          /*font-family: 'Sigmar One', cursive;*/
          font-family: 'Chango', cursive;
          font-size: 115px;
          color: white;
          text-shadow: 5px 5px 5px #000;
          /* background-color: #0047b2 */
          width: 100%;
          height: 100%;
          margin: 0px;
          background: url(img/texture.png) repeat; 
  
      }
  
      #word {
          position:absolute; 
          height:100%; 
          width: 70%;
          display: table;
          padding: 0 15% 0 15%;
          background: rgba(0, 71, 178, .5);
      }
  
      h1 {
          display: table-cell;
          vertical-align: middle;
          text-align:center;
          height: 1em;
  
      }
  
      a {
          /*border: 1px solid black;*/
          display: inline-block;
          line-height: 100%;
          overflow: hidden;
  
      }
  
      a:visited, a:active {
          text-decoration: none;
          color: white;
          /*color: #E8E8E8;*/
  
      }
  
      a:link {
          text-decoration: none;
          color: white;
          text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;
  
      }
  
      a:hover {
          text-shadow: 5px 5px 5px #000;
          color: white;
      }
  
      #h:hover #word{
          background-color: rgba(0, 102, 0, .5);
      }
  
      @media (max-width: 1330px){
          #word {
              width: 100%;
              padding: 0px;
  
          }
      }
  </code></pre>
  
  <p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/SZ9ku/1/" rel="nofollow">http://jsfiddle.net/SZ9ku/1/</a></p>