admin管理员组文章数量:1317894
What I am trying to do is, when I hover over a link, make its right border change colour as well as make the previous link's border change colour.
<div id="navbar">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Gigs</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
And here's the JavaScript:
$("li a").hover(function() {
$(this).animate({
color: '#0099FF',
borderRightColor: '#0099FF'
}, 500);
$(this).prev().animate({borerRightColor: '#0099FF'}, 500);
}, function() {
$(this).animate({
color: '#FFFFFF',
borderRightColor: '#FFFFFF'
}, 500);
$(this).prev().animate({borerRightColor: '#FFFFFF'}, 500);
});
Any help or advice would be appreciated, thanks!
What I am trying to do is, when I hover over a link, make its right border change colour as well as make the previous link's border change colour.
<div id="navbar">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Gigs</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
And here's the JavaScript:
$("li a").hover(function() {
$(this).animate({
color: '#0099FF',
borderRightColor: '#0099FF'
}, 500);
$(this).prev().animate({borerRightColor: '#0099FF'}, 500);
}, function() {
$(this).animate({
color: '#FFFFFF',
borderRightColor: '#FFFFFF'
}, 500);
$(this).prev().animate({borerRightColor: '#FFFFFF'}, 500);
});
Any help or advice would be appreciated, thanks!
Share Improve this question edited Jan 16, 2012 at 1:57 Ry-♦ 225k56 gold badges492 silver badges498 bronze badges asked Jan 14, 2012 at 18:52 GhostPineappleGhostPineapple 311 silver badge2 bronze badges 1-
You're looking for:
$(this).parent().prev().children('a:first')
– Rob W Commented Jan 14, 2012 at 18:56
3 Answers
Reset to default 6The selector li a
selects each <a>
element. .prev()
selects the previous sibling, not the "previous element in the collection," and there is no previous element for the <a>
s because they have no siblings, only parents. Try this instead:
$(this).closest('li').prev().children().animate(...);
Also, you've used borerRightColor
instead of borderRightColor
.
From the documentation for .prev()
:
Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
The links are not siblings.
$("li").hover(function() {
$(this).children().animate({
color: '#0099FF',
borderRightColor: '#0099FF'
}, 500);
$(this).prev().children().animate({borerRightColor: '#0099FF'}, 500);
}, function () {
$(this).children().animate({
color: '#FFFFFF',
borderRightColor: '#FFFFFF'
}, 500);
$(this).prev().children().animate({borerRightColor: '#FFFFFF'}, 500);
});
Here's a demo on jsFiddle. I put the hover on the <li>
while I was at it so you aren't traversing all over the place.
The this
context refers to the <a>
element being hovered, not the <li>
. The <a>
element doesn't have a previous sibling.
Use the parent
method to access the <li>
:
$(this).parent()......
本文标签: javascriptUnsure why jQuery prev() is not workingStack Overflow
版权声明:本文标题:javascript - Unsure why jQuery .prev() is not working - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742037214a2417363.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论