Roll over/in on only one element in jQuery

Question

I have a problem with jQuery task: I'm trying to show '«' sign when rolling over a link. The problem is: only one link can be "rolled over" at a time, but the '«' is showing on all of them.

Here's the code:

$(".list td a").hover(
  function() { $(".laquo").show(); },
  function() { $(".laquo").hide(); }
);

So, as I understand, after rolling over an 'a' element inside '.list td' my class '.laquo' should be displayed. This is working just fine. But how do I tell jQuery to target only one 'a' at a time?

I've tried solution from similar question:

function() { $(".laquo", this).show(); },

but it's not working - '«' is not showing at all. What do I do wrong?

Edit with HTML:

<div class="list">
    <table>
        <tr>
            <td class="left">1.</td>
            <td>
                <a href="index.html">Circles</a>
                <span class="laquo" style="display:none;">&nbsp;&laquo;</span>
            </td>
        </tr>
    </table>
</div>

As you can see, '.laquo' is not a child of an 'a'. How do I select it then?

Aaaand, I got it :D. Just had to delete the 'a', so I'm selecting from 'td'.

Thanks for help everyone!

Answer 1

When the .laquo is a child of the a, use the current a as context:

$(".laquo",this).show();

When not, we need to see the HTML for the related elements.

Answer 2

Assuming the .laquo element is a child of the link elements:

$(".list td a").hover(function(){
    $(this).find('.laquo').toggle();
});

Answer 3

Your code is fundamentally right so I'd assume you've just messed something up in code you've not shown us.

Example of the Hover Code

$(".list td a").hover(function(){
  $(".laquo", this).show();   
}, function(){
  $(".laquo", this).hide();  
});

Link to JS Fiddle of it working

Ideally however, this task shouldn't be done in Javascript at all as it's easy enough to implement it in pure CSS using the :hover psuedo-selector.

Link to JSFiddle in pure CSS