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();
});

Answer 2

您也可以尝试.children([Selector])

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

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

http://api.jquery.com/children/

Answer 3

您需要的是

$(this).find('.legend').fadeIn();

在这种情况下，$(this)指的是触发事件的元素，.find()仅在其子节点中查找。

其他内部的Jquery选择器元素

3 个答案: