jQuery动画(addsClass)只有一个<a>标签而不是全部？

Question

我有这个小提琴:http://jsfiddle.net/CS5Bb/2/

我想要发生的a一切就是当我将鼠标悬停在标签上时,它会动画添加一些填充和左边的边框.它只针对第一个(Home)执行此操作,但不会针对其他(我认为)相同的内容执行此操作.

我觉得我错过了一些非常明显的东西.就像,当我发现原因时,我会打我的额头.但由于jQuery只有4行错误,我真的无法看到我出错的地方.

Answer 1

你不能有多个具有相同名称的ID ...

请改用类

小提琴

<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无法做的事情:悬停选择器......

小提琴

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