Jquery Selecting Element

Question

Sorry I'm new to this. I have a problem with selecting an element inside my nav list

<ul class="subnav">
<li><a href="#">Link 1</a><span class="sub">Description 1</span></li>
<li><a href="#">Link 2</a><span class="sub">Description 2</span></li>
<li><a href="#">Link 3</a><span class="sub">Description 3</span></li>
</ul>

I'm looking to create a function that when a user hovers on Link 1, only Description 1 text should appear.

Below is my JQUERY

$('ul.subnav li a').hover(function() {

    $('.sub').animate({opacity: "show", top: "5"}, "slow");
}, function() {
    $('.sub').animate({opacity: "hide", top: "-5"}, "slow");
});

The problem I am having is when a user hover on any link, all of the description text will appear. How can I tell JQUERY to show only the Description on where the mouse is hovered?

Thanks much.

Felix · Accepted Answer · 2014-04-16 15:24:22Z

3

You can use $(this) to get a reference to only the anchor which is currently hovered along with .next() to animate only span element which is the next immediate sibling of your hovered anchor:

$('ul.subnav li a').hover(function() {
    $(this).next().animate({opacity: "show", top: "5"}, "slow");
}, function() {
   $(this).next().animate({opacity: "hide", top: "-5"}, "slow");
});

answered Apr 16, 2014 at 15:24

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marian Theisen Over a year ago

or $(this).closest('li').find('.sub')

Felix Over a year ago

@MarianTheisen Yes, it's an alternative but .next() will be faster in this case.

Marian Theisen Over a year ago

i agree, but this will couple it strongly to the sequence of the tags. if somebody adds sth. between a and span, it'll break

Popoy Over a year ago

This turned out to be a simple solution for my very difficult problem thanks Felix for your input it works!

Dryden Long · Accepted Answer · 2014-04-16 15:27:33Z

0

@Felix has a great answer, but you can also use .siblings() with your markup.

$('ul.subnav li a').hover(function() {
    $(this).siblings().animate({opacity: "show", top: "5"}, "slow");
}, function() {
    $(this).siblings().animate({opacity: "hide", top: "-5"}, "slow");
});

http://jsfiddle.net/bUZ8j/

answered Apr 16, 2014 at 15:27

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

Collectives™ on Stack Overflow

Jquery Selecting Element

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related