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!
Best Answer
The 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:Also, you've used
borerRightColor
instead ofborderRightColor
.