title: Hide/show text in body on hover of child element
body: <p>I'd like to initially hide text in my body, but show it once an element in a child div is hovered over.  So In this case, I want them both to initially start out as <code>display: none</code> but then when I hover over the letter "H" I want "Text A" to show.  When I hover over letter "E" I want "Text B" to show.  I don't want to put my #content elements inside of my #word elements.  I want to keep them as separate divs.</p>
  
  <p>Any Ideas?</p>
  
  <p>(See Fiddle below)</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 id="e" class= "letter" href=#&gt;E&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a id="l" class= "letter" href=#&gt;L&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a id="l2"class= "letter" href=#&gt;L&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a id="o" class= "letter" href=#&gt;O&lt;/a&gt;&lt;/h1&gt; 
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
      &lt;div id="textA"&gt;Text A&lt;/div&gt;
      &lt;div id="textB"&gt;Text B&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code> body {
      font-family: 'Chango', cursive;
      font-size: 115px;
      color: white;
      text-shadow: 5px 5px 5px #000;
  
      width: 100%;
      height: 100%;
      margin: 0px;
      background: black;
      }
  
      #name {
      position:absolute; 
      height:100%; 
      width: 70%;
      display: table;
      padding: 0 15% 0 15%;
      background: black;
      }
  
      h1 {
      display: table-cell;
      vertical-align: middle;
      text-align:center;
      height: 1em;
  
      }
  
      a {
      /*border: 1px solid black;*/
      display: inline-block;
      line-height: 89%;
      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;
      }
  </code></pre>
  
  <p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/ADfhj/1/" rel="nofollow">http://jsfiddle.net/ADfhj/1/</a></p>
  
  <p>PS- I've tried the following CSS to no avail:</p>
  
  <pre><code>#textA {
  display: none;
  }
  
  #word:hover #textA {
  display: block;
  }
  </code></pre>