how can i create a hover function to the post div?

Hi guys ,
I need to make my postmetadata(<p></p>) field visible when i hover on my post div,which is generated in a loop

just like in this site chow
when hover on the post you can see that the postmetadata field is visible.

i just tried my hand in jquery but it invokes every fields

my code is below

$(document).ready(function(){
$(".post").hover(function(){
$(".postmetadata").css('display','block');
},function(){
$(".postmetadata").css('display','none');
});
});

<div class="posts" id="post-<?php the_ID(); ?>">

<h2 class="posttitle"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<p style="width:430px;color:#333;font-size:13px;line-height:1.5em;float:left;"><?php the_excerpt(); ?></p>
<p style="display:none" class="postmetadata"><span>Posted </span>on <?php the_time('l'); ?>, <?php the_time('F'); ?> <?php the_time('jS'); ?>, <?php the_time('Y'); ?><span style="float: right; color:#999;"><?php the_views(); ?></span></p>
</div>