jQuery selectors parents and children?
<p>I want something similar to what a Wordpress do to its posts - actions.</p>

<p><strong>My HTML</strong></p>

<pre><code>&lt;div class="onhover"&gt;
  &lt;p class=""&gt;This is a paragraph. My background will be yellow when you hover over me — even if you're using Internet Explorer.&lt;/p&gt;
  &lt;div class="actions"&gt;&lt;a href="#"&gt;Add&lt;/a&gt; | &lt;a href="#"&gt;Edit&lt;/a&gt; | &lt;a href="#"&gt;Modify&lt;/a&gt; | &lt;a href="#"&gt;Delete&lt;/a&gt;&lt;/div&gt;  
&lt;/div&gt;
&lt;div class="onhover"&gt;  
  &lt;p class=""&gt;Move your mouse over me! Move your mouse over me! I'll turn yellow, too! Internet Explorer users welcome!&lt;/p&gt;
  &lt;div class="actions"&gt;&lt;a href="#"&gt;Add&lt;/a&gt; | &lt;a href="#"&gt;Edit&lt;/a&gt; | &lt;a href="#"&gt;Modify&lt;/a&gt; | &lt;a href="#"&gt;Delete&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>* { margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; }
    div.actions { padding:5px; font-size:11px; visibility: hidden; }
    #hover-demo1 p:hover {
     background: #ff0;
    }
    .pretty-hover {
     background: #fee;
     cursor: pointer;
    }
</code></pre>

<p><strong>Jquery</strong></p>

<pre><code>$(document).ready(function() {
      $('.onhover p').hover(function() {
     $(this).addClass('pretty-hover');
     $('div.actions').css('visibility','visible');
      }, function() {
     $(this).removeClass('pretty-hover');
     $('div.actions').css('visibility','hidden');
      });
    });
</code></pre>

<p>What I want is, on hover a particular P element the respective actions should be visible, currently on hover a p element all other actions are being visible. How do i confine to a particular one?</p>
