Display none/block on div is not working

Question

i'm trying to get this working but i cant figure out why it wont, is there a way of troubleshooting this i.e to see errors

What i am trying to achieve is to show the info in the showhim div when i hover over the stat1 div but it aint happening.

I put it here:

http://jsfiddle.net/ksvrY/39/

<div id="post-wrap">
   <div class="showhim" id="stat1_text">
        This is some example test<br />
        This is another line<br />
        And another one<br />
        And a final one
  </div>


    <div id="stat1" class="stat1">
        <a href="#">Hover over this div</a>
    </div>
</div>

.showhim
{
    display: none;
    margin-bottom: 30px;
}

.stat1:hover .showhim
{
    display: block;
}

Answer 1

Edit: As pointed out by Paul, you can use the sibling selector. So there is actually a way to do this with pure css in this case

.stat1 is not a parent of .showhim.

You can use javascript. So something like (using jQuery):

$('.stat1').mouseover(function(){
  $('.showhim').show();
}).mouseout(function(){
  $('.showhim').hide();
});

See http://jsfiddle.net/ksvrY/50/