Question

我想要发生的一切就是当我将鼠标悬停在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无法做的事情：悬停选择器......

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

Answer 2

ID是唯一的，因此在使用ID时只会选择第一个元素，因为不应该有更多具有完全相同ID的元素。改为使用类或定位父类。

自：

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

要：

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

FIDDLE

jQuery动画（添加类）只有一个<a> tag instead of all?</a>

2 个答案: