0

我真的是 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 -->

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

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

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

谢谢！

4

6 回答 6

2

closest():

获取与选择器匹配的第一个元素，从当前元素开始，向上遍历 DOM 树。

您可以使用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')
});
于 2012-08-03T04:51:35.037 回答
2

.prev()由于期望h2是 的上一个同级，因此使用figure，.closest()搜索所选项目的祖先以寻找匹配项。

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

小提琴

于 2012-08-03T04:52:10.303 回答
1

closest()在父节点之间返回 dom 树中的元素。您将需要siblings("h2")或只是prev()在悬停之前获取元素<figure>：

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

从 selector 开始$('.box-product')，您可以使用find("h2")or children("h2")，但这会选择整个文档中的所有这些。如果你的盒子是独一无二的，你也可以使用类似的东西$("#box-product h2")。

于 2012-08-03T04:53:04.663 回答
1

h2是 的兄弟姐妹figure。

$('.box-product figure').hover(function() {
    $(this).siblings('h2').animate({color: '#f00'}, 'slow')
}, function() {
    $(this).siblings('h2').animate({color: 'inherit'}, 'slow')
});
于 2012-08-03T04:53:16.753 回答
0

试试这个......最近的第一个元素......

​$('h2').siblings(':first')​;​

小提琴

于 2012-08-03T04:53:36.753 回答
0

close()方法从父层次结构中找到最接近的匹配，而不是从子元素或兄弟元素。

在您的情况下，您只需要从父元素中找到子元素。像这样：

 $('.box-product figure').hover(function() {
     $(this).closest('.box-product').find('h2').animate({color: 'f00'}, 'slow')
 }, function() {
     $(this).closest('.box-product').find('h2').animate({color: 'inherit'}, 'slow')
 });
于 2012-08-03T04:57:16.843 回答