jQuery sélecteurs parents et enfants?

Question

Je veux quelque chose de similaire à ce que fait un Wordpress à ses messages - actions.

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

Ce que je veux est, en vol stationnaire un particulièremen r P élément les actions respectives doivent être visibles, actuellement sur hover un élément p toutes les autres actions sont visibles. Comment puis-je m'en tenir à un particulier?

Answer 1

Pas besoin de définir l'attribut de visibilité CSS. Il existe des méthodes jQuery pour cacher et montrer des choses déjà. Utilisez simplement la méthode de traversée next().

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

Answer 2

Peut-être cacher tous div.actions d'abord et montrer que quand on a plané été parent:

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