Hover over <span> and have a <div> display? - css

Question

Here is what I am currently doing.
PHP echo's out the recent post in the database for a username with:
echo '<div id="userblock">test</div>';
echo '<span class="userpost">' . $str . ' - posted by <b>' . $username . '</b></span><br /><br />';
I then want to have it so when the test is hovered over you see the users profile/stats/information appear directly to the left of the post.
Here is what I have for CSS so far and I am in no way shape or form good at styling. So I would love your input.
div#userblock {
display:none;
}
span.userpost:hover div#userblock {
background-color:#efefef;
height:150px;
width:150px;
}

Answer 1

Here is how you can do this with jquery: http://jsfiddle.net/surendraVsingh/sT66P/1/
Jquery Code:
$('.userpost').hover(function(){
$(this).prev("#userblock").show();
//$(this).prev("#userblock").toggle(); //if you want to toggle show/hide of div//
});​
CSS Code
#userblock {
background:#999;
display:none;
}
.userpost{
background-color:#efefef;
height:150px;
width:150px;
}​

Answer 2

For that #userblock must be nested within .userpost.
Something like..
echo '<span class="userpost"> <div id="userblock".. /> </span>';
And then use the following CSS:
#userblock {
display:none;
}
.userpost:hover #userblock {
display:block;
}