title: change visibility for each div on mouseenter/mouseleave jquery
body: <p>I've looked at all the documentation on the jquery website, and I've also searched on all the questions related to my problem, but I have not found a solution.  What I'm wanting to do is when you hover on the <code>post</code> class is to make the links in <code>post span a</code> to appear and to dissapear when the mouse leaves obviously... Right now, the only thing that is happening, is that when I hover over one of the <code>post</code> classes, the links will appear for every div, but I don't want that, I just want it like what happens on a twitter post, for example, when hover the posts, the reply, retweet, favorite, and more links appear. I want it like that.</p>
  
  <pre><code>$(function(){
    $.each(function(){
      $(".post").mouseenter(function(){
          $(".post span a").css("visibility", "visible");
      });
    });
    $.each(function(){
      $(".post").mouseleave(function(){
          $(".post span a").css("visibility", "hidden");
      });
    });
  });
  </code></pre>
  
  <p>edit: Sorry about posting no HTML, here it is</p>
  
  <pre><code>  &lt;div class="post"&gt;
  
                  &lt;span&gt;
                      &lt;a href="&lt;?php echo base_url() . '/discussion/edit/' . $post['pid'];?&gt;" class="post-edit" id="&lt;?php echo $post['pid'];?&gt;"&gt;edit&lt;/a&gt;
                      &amp;nbsp;
                      &lt;a href="&lt;?php echo base_url('discussion/delete/' . $post['pid']); ?&gt;"&gt;delete&lt;/a&gt;
                  &lt;/span&gt;
                  &lt;/div&gt;
  </code></pre>