我想要做的是,当我将鼠标悬停在链接上时,使其右边框更改颜色,并使之前链接的边框更改颜色。
<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>
这是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);
});
感谢任何帮助或建议,谢谢!
答案 0 :(得分:6)
选择器li a
选择每个<a>
元素。 .prev()
选择前一个兄弟,而不是“集合中的前一个元素”,并且<a>
没有先前的元素,因为它们没有兄弟,只有父母。试试这个:
$(this).closest('li').prev().children().animate(...);
此外,您已使用borerRightColor
代替borderRightColor
。
答案 1 :(得分:1)
说明:获取匹配元素集中每个元素的前一个兄弟,可选择由选择器进行过滤。
链接不是兄弟姐妹。
$("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。当我在它的时候,我将悬停在<li>
上,所以你不会遍布整个地方。
答案 2 :(得分:0)
this
上下文指的是正在悬停的<a>
元素,而不是<li>
。 <a>
元素没有先前的兄弟。
使用parent
方法访问<li>
:
$(this).parent()......