javascript - 其他里面的jquery选择器元素

Question

我在尝试构建一个漂亮的“产品”页面时遇到问题，我有 html:

    <div class="product-box-2">
     <a href="img/produtos/1-lightbox.jpg" class="lightbox"><img src="img/produtos/1.jpg" alt=""></a>
     <p class="legend">>> Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi.</p>
     <a href="img/produtos/1-lightbox.jpg" class="ampliar lightbox">clique para ampliar</a>
    </div>
    <div class="product-box-2">
     <a href="img/produtos/1-lightbox.jpg" class="lightbox"><img src="img/produtos/1.jpg" alt=""></a>
     <p class="legend">>> Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi.</p>
     <a href="img/produtos/1-lightbox.jpg" class="ampliar lightbox">clique para ampliar</a>
    </div>

很多时候都需要它。然后我尝试在 .legend 上添加一个很好的效果，使用 CSS 设置“display:none”和 Jquery:

    $('.product-box-2 a').mouseenter(
    function(){
    $('.legend').fadeIn();
});

$('.product-box-2').mouseleave(
    function(){
    $('.legend').fadeOut();
});

但我有相同的类，因此，当我将鼠标放在某些 .product-box-2 上时，所有图例都会出现...而且我不知道如何只选择 .legend 中的 . product-box-2 a 我在里面。

如果你想看到它的实际效果，here it is!

Answer 1

通过将元素作为上下文将内部选择器的范围限制在事件发生的元素上。参见 the docs对于接受上下文的签名。

$('.product-box-2 a').mouseenter(
   function(){
    $('.legend',$(this).closest('div')).fadeIn();
});
$('.product-box-2').mouseleave(
    function(){
    $('.legend',this).fadeOut();
});