jQuery селекторы родители и дети?

Question

Я хочу что-то похожее на то, что Wordpress делает на свои должности - действия.

Мой 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'); 
     }); 
    }); 

То, что я хочу, на обморожения particula r P, соответствующие действия должны быть видимыми, в настоящее время при наведении на элемент p все другие действия видны. Как я ограничиваюсь определенным?

Answer 1

Не нужно устанавливать атрибут видимости CSS. Есть методы jQuery для скрытия и отображения вещей уже. Просто используйте метод обхода 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

Может быть скрыть все div.actions на первой и показать только тогда, когда родитель был колебались:

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