I'm having a issue trying to built a nice "products" page, I have the 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 modo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco modo 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 modo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco modo put a bird on it cred synth kogi.</p>
     <a href="img/produtos/1-lightbox.jpg" class="ampliar lightbox">clique para ampliar</a>
    </div>

And so many times it's needed. And then I try to put a nice effect on the .legend, with CSS to seting "display:none" and the Jquery:

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

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

But I have the same classes, and so, all legends appear when I put my mouse over some of the .product-box-2 a... And I have no idea how to select only the .legend inside the .product-box-2 a there I'm in.

If you want to see this in action, here it is!

I'm having a issue trying to built a nice "products" page, I have the 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 modo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco modo 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 modo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco modo put a bird on it cred synth kogi.</p>
     <a href="img/produtos/1-lightbox.jpg" class="ampliar lightbox">clique para ampliar</a>
    </div>

And so many times it's needed. And then I try to put a nice effect on the .legend, with CSS to seting "display:none" and the Jquery:

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

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

But I have the same classes, and so, all legends appear when I put my mouse over some of the .product-box-2 a... And I have no idea how to select only the .legend inside the .product-box-2 a there I'm in.

If you want to see this in action, here it is!

• javascript
• jquery
• jquery-selectors

• possible duplicate of jquery selector: reference class inside of where i clicked: -- different event, same problem. The jQuery documentation is very good, I suggest you have a look at it: api.jquery.. – Felix Kling Commented May 9, 2012 at 23:43
• Yeap, was the same problem, sorry about that... But sometimes happen that I know where to search, but don't know "how" to search, so I need a bit of human help, even in this case, as you can see I'm really in the beginning of my studies, then sometimes is really hard know "what" to as for the internet. – Edu Ruiz Commented May 10, 2012 at 0:09
• No need to be sorry, I'm not blaming you :) I know it's sometimes difficult to find the answer through search. I'd just be happy if more people would would vote to close as a duplicate (in general) so that we don't clutter the page with the same answers over and over again :-/ – Felix Kling Commented May 10, 2012 at 0:12

3 Answers 3

Restrict the scope of the inner selector to the element on which the event occurred by giving it the element as the context. See the docs for the signature that accepts a context.

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

you can try .children([Selector]) as well

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

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

http://api.jquery./children/

What you need is

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

In this case $(this) refers to the element that triggered an event and .find() looks only among its children.