javascript - 使用 jquery 选择元素附近的第一个 h2

Question

我对 JS 和 JQuery 很陌生，但我无法选择要制作动画的元素，这是我的 HTML

    <div class="box-product">
      <h2>Light</h2>
      <figure>
        <img src="img/boxes/light.jpg" alt="Pepper Box Light" title="Pepper Box Light" />
        <figcaption>
          Versão light, porém igualmente apimentada da nossa PepperBox, para quem quer se divertir com seu amor</figcaption>
      </figure>          
    </div><!-- box-product -->

当用户将鼠标悬停在figure上时，我尝试选择h2，所以这是我最好的猜测:

    $('.box-product figure').hover(function() {
    $('.box-product').closest('h2').animate({color: 'f00'}, 'slow')
}, function() {
    $('.box-product').closest('h2').animate({color: 'inherit'}, 'slow')
});

但是什么也没发生，所以，我需要一些帮助。

谢谢!

Answer 1

最近的():

Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

您可以使用prev()方法:

$('.box-product figure').hover(function() {
   $(this).prev().animate({color: '#f00'}, 'slow')
}, function() {
   $(this).prev().animate({color: 'inherit'}, 'slow')
});

或者:

$('.box-product figure').hover(function() {
   $(this).siblings('h2').animate({color: '#f00'}, 'slow')
}, function() {
   $(this).siblings('h2').animate({color: 'inherit'}, 'slow')
});