Hide/show text in body on hover of child element - html

Question

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 display: none 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.
Any Ideas?
(See Fiddle below)
HTML:
<div id="word">
<h1><a id="h" class= "letter" href=#>H</a></h1>
<h1><a id="e" class= "letter" href=#>E</a></h1>
<h1><a id="l" class= "letter" href=#>L</a></h1>
<h1><a id="l2"class= "letter" href=#>L</a></h1>
<h1><a id="o" class= "letter" href=#>O</a></h1>
</div>
<div id="content">
<div id="textA">Text A</div>
<div id="textB">Text B</div>
</div>
CSS:
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;
}
Fiddle: http://jsfiddle.net/ADfhj/1/
PS- I've tried the following CSS to no avail:
#textA {
display: none;
}
#word:hover #textA {
display: block;
}

Answer 1

There is no way achieving it using css only. However you can try simple javascript/jquery.
$('.letter').mouseover(function(){
var cont = $(this).attr('id');
$('#content>div').hide();
$('#text_'+cont).fadeIn();
});
Check the Fiddle