不确定jQuery.prve(）不起作用的原因

Unsure why jQuery .prev() is not working

本文关键字：不起作用 jQuery prve 不确定      更新时间：2023-09-26

当我将鼠标悬停在一个链接上时，我要做的是使其右边框和上一个链接的边框变色。

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

如有任何帮助或建议，我们将不胜感激，谢谢！

选择器li a选择每个<a>元素。.prev()选择上一个同级元素，而不是"集合中的上一个元素"，并且<a>没有上一个元件，因为它们没有同级元素，只有父元素。试试这个： 
$(this).closest('li').prev().children().animate(...);

此外，您使用了borerRightColor而不是borderRightColor。

来自.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);    
});

这是jsFiddle上的一个演示。我把鼠标悬停在<li>上，这样你就不会到处乱跑了。

this上下文指的是悬停的<a>元素，而不是<li>。<a>元素没有以前的同级元素。

使用parent方法访问<li>:

$(this).parent()......
相关文章：