3

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

我想要发生的只是当我将鼠标悬停在一个a标签上时，它会在左侧添加一些填充和边框。它仅对第一个（家庭）执行此操作，但对于其他（据我所知）相同的则不执行此操作。

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

4

2 回答 2

6

您不能有多个具有相同名称的 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 不能用 :hover 选择器做的事情......

小提琴

.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;
}
于 2013-01-26T16:26:14.247 回答
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');
});

小提琴

于 2013-01-26T16:25:10.293 回答