如何将 $(this) 与 jquery 一起使用来更改 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是同级元素。改用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();
});