Question

我有一个产品盒，我想在其中应用显示显示添加到购物车按钮的悬停，所以我需要一个适用于不同盒子的jQuery。我的html代码是...

<div class="col-md-3 product-tabs-1">
    <div class="col-md-12 product-img product-img-1 no-pad-lf"> <img src="assets/img/shop/1.jpg" class="img-responsive"> <span class="sale-btn">Sale!</span>
        <div class="add-cart-btn add-cart-btn-1"> <button class="btn btn-primary cart-btn">Add To Cart</button> </div>
    </div>
    <div class="col-md-12 no-pad-lf">
        <h5>BRUSH</h5> <span class="pull-left sale-price">£15.00 </span><span class="pull-left">&nbsp £12.00</span><span class="pull-right"><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></span> </div>
</div>

我在单个元素上的脚本是

$(document).ready(function() {
    for (i = 0; i <= 6; i++) {
        $('.product-img-' + i).hover(function() {
            $('.add-cart-btn').fadeToggle();
        });
    }
});

Answer 1

.add-cart-btn按钮是具有悬停事件的div的子元素，因此可以在悬停元素上下文（this）中找到它，以在其中找到子元素：

$('.product-img').hover(function(){
  $('.add-cart-btn',this).fadeToggle();
});

Answer 2

您需要定位当前元素的子元素，使用.find()定位它。

此外，您不需要for循环来附加事件处理程序，可以使用Class selector使用通用CSS类（即product-img

来实现）

$('.product-img').hover(function(){
   $(this).find('.add-cart-btn').fadeToggle();
});

jQuery对悬停在不同元素上的相同动作

2 个答案: