Question

对不起，我是新来的。我在导航列表中选择元素时遇到问题

<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>

我正在寻找创建一个功能，当用户在链接1上悬停时，只应出现描述1文本。

以下是我的JQUERY

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

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

我遇到的问题是当用户悬停在任何链接上时，将显示所有说明文字。如何告诉JQUERY仅显示鼠标悬停位置的说明？

非常感谢。

Answer 1

您可以使用$(this)仅引用当前与.next()一起悬停的锚点，以仅设置span元素的动画，该元素是您悬停的锚点的下一个直接兄弟：

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

Answer 2

@Felix有一个很好的答案，但你也可以使用.siblings()加上你的标记。

$('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/

Jquery选择元素

2 个答案: