jQuery How to affect Single element on mouseOver

Question

Hi,

As I'm still learning, this question might seem to be very simple to answer, but I still need to ask.

How do I need to change this script, so it will not display all the tooltips?

What is happening now is whenever I hover on .pink-nose a all the .tooltip are fading in at this same time

    $(function(){
        var pn = $('.pink-nose a')
        var tp = $('.pink-nose .tooltip')

        tp.css({'display':'none'})
        pn.mouseover(function(){
            tp.fadeIn()      
        })
    })

Thank you for your help in advance

Answer 1

$('.pink-nose .tooltip').hide().each(function() {
    var $this = $(this);
    $this.parents('a').mouseover(function() {
        $this.fadeIn();
    });
});

Answer 2

Instead of using tp in the handling function, you should start from this (the element that was moused over), and traverse to its related tooltip. Something like this:

$(function(){
    $('.pink-nose .tooltip').hide();

    $('.pink-nose a').mouseover(function(){
        $(this).parents('.pink-nose:first').find('.tooltip').fadeIn();
    })
})

The exact traversal will depend on the structure of your markup, take a look at the jQuery documentation for Traversing to figure out what will work best.