jQuery 선별 자 부모와 자녀?

Question

저는 Wordpress가 게시물에 대해하는 것과 비슷한 것을 원합니다. 내가 원하는 가져가 particula에

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

입니다 r 엘리먼트는 각각의 액션이 보이도록해야하며, 현재 다른 엘리먼트가 보이도록 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(); 
    }); 
});