Get next element's attibute in JQuery

I need to grab the next link's href value when hovering a series of links. I've got this:

<div id="foo">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3开发者_JAVA百科">Aenean lacinia</a></li>
</ul>
</div>

$( "#foo a" ).hover(function() {
    var href = $(this).next().attr('href');
    console.log(href);
});

Seems good to me, but I get 'undefined' in my console.

I'm new to JQuery, but not JS. Any ideas?

TIA

The next()^[docs] method only works on direct siblings.

You haven't provided your HTML, so I'll just guess that you need to traverse up to a common ancestor using the parent()^[docs] method or the closest()^[docs] method or something, use .next() to traverse to the next adjacent ancestor, then use the find()^[docs] method to get the nested <a>.

how about

   $('#foo a').hover(function () {
        var href = $(this).closest('li').next().find('a').attr('href');
    });