不确定为什么jQuery .prev()不起作用

时间:2012-01-14 18:52:15

标签: javascript jquery html

我想要做的是,当我将鼠标悬停在链接上时,使其右边框更改颜色,并使之前链接的边框更改颜色。

<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);      
});

感谢任何帮助或建议,谢谢!

3 个答案:

答案 0 :(得分:6)

选择器li a选择每个<a>元素。 .prev()选择前一个兄弟,而不是“集合中的前一个元素”,并且<a>没有先前的元素,因为它们没有兄弟,只有父母。试试这个:

$(this).closest('li').prev().children().animate(...);

此外,您已使用borerRightColor代替borderRightColor

答案 1 :(得分:1)

来自documentation for .prev()

  

说明:获取匹配元素集中每个元素的前一个兄弟,可选择由选择器进行过滤。

链接不是兄弟姐妹。

$("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()......