jqueryで$（this）を使ってdivの親にある要素を変更するには？

Question

私はJQueryで簡単なことをしようとしていますが、私は何をすべきか理解するのに苦労しています。ここで.overlay-detailが他$(this).closest('p img:first-child').css('display', 'none')('display', 'block')

をホバリングされたときに私は何をしたいことはある

（理解するためのHTMLを参照してください）

<div id="block-views-quipe-block"> 

<div class="field-content"> 
    <p> 
    <img alt="" src="/sites/default/files/_CA17330lr.jpg"> 
    <img alt="" src="/sites/default/files/_CA17322lr.jpg"> 
    </p> 

    <div class="overlay-detail"> 
    <p>John Doe 1</p> 
    <p>job 1</p> 
    </div> 
</div> 

<div class="field-content"> 
    <p> 
    <img alt="" src="/sites/default/files/_CA17330lr.jpg"> 
    <img alt="" src="/sites/default/files/_CA17322lr.jpg"> 
    </p> 

    <div class="overlay-detail"> 
    <p>John Doe 2</p> 
    <p>job 2</p> 
    </div> 
</div> 

... 

</div> 

は私がやって考えたものである：

$("#block-views-quipe-block .overlay-detail").hover(function(){ 
    $(this).closest('p img:first-child').css("display", "none"); 
}, function(){ 
    $(this).closest('p img:nth-child(2)').css("display", "block"); 
}); 

私は間違って何をしていますか？

Answer 1

closest()は親要素を探しますが、pは兄弟ですから問題です。子供imgを取得するには、その後、pを取得する代わりにfind()をprev()を使用します。

$("#block-views-quipe-block .overlay-detail").hover(function(){ 
    $(this).prev('p').find('img:first-child').hide(); 
}, function(){ 
    $(this).prev('p').find('img:nth-child(2)').show(); 
});