如何將$（this）與jquery一起使用以更改div父元素上的元素？

Question

我正在嘗試使用JQuery做簡單的事情，但是我很難理解我應該做什么。

我想做的是將.overlay-detail懸停在$(this).closest('p img:first-child').css('display', 'none') else ('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是同級元素。 使用prev()來獲取p ，然后使用find()來獲取子img ：

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