jQuery selectors parents and children?

Question

I want something similar to what a Wordpress do to its posts - actions.

My HTML

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

CSS

* { 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;
    }

Jquery

$(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');
      });
    });

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?

Answer 1

No need to set the CSS visibility attribute. There are jQuery methods for hiding and showing things already. Just use the next() traversal method.

$(document).ready(function() {
  $('.onhover p').hover(function() {
    $(this).addClass('pretty-hover');
    $(this).next().show();
  }, function() {
    $(this).removeClass('pretty-hover');
    $(this).next().hide();
  });
});

Answer 2

May be hide all div.actions at first and show only when parent was been hovered:

$(document).ready(function() {
  $('div.actions').hide();
  $('.onhover p').hover(function() {
    $(this).addClass('pretty-hover');
    $(this).children('div.actions:first').show();
  }, function() {
    $(this).removeClass('pretty-hover');
    $(this).children('div.actions:first').hide();
  });
});