jQuery animate (addClass) 仅适用于一个 标签而不是全部？

Question

我这里有这个 fiddle :http://jsfiddle.net/CS5Bb/2/

我想要发生的就是当我将鼠标悬停在 a 标记上时，它会以动画方式在左侧添加一些填充和边框。它确实只对第一个(主页)执行此操作，但对其他(据我所知)相同的其他执行此操作。

我觉得我在这里遗漏了一些非常明显的东西。就像，当我找到原因时，我会拍拍我的额头。但是 jQuery 只错了 4 行，我真的看不出哪里出错了。

Answer 1

不能有多个同名的 ID ...

使用类代替

Fiddle

<p><a class="nav">Home</a></p>
<p><a class="nav">Résumé</a></p>
<p><a class="nav">Contact Me</a></p>


$('.nav').hover(function () {
    $(this).addClass('navi');
}, function () {
    $(this).removeClass('navi');
});

编辑#1

这个 js 不会做任何 CSS 不能用 :hover 选择器做的事情...

Fiddle

.nav:hover {
    border-left: solid red 3px;
    padding-left: 5px;
}
.nav {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}