3

私はここにこのフィドルを持っています：http：//jsfiddle.net/CS5Bb/2/

私がしたいのは、aタグにカーソルを合わせると、左側に少しのパディングと境界線を追加してアニメーション化することだけです。これは、最初の1つ（ホーム）に対してのみ実行されますが、（私が知る限り）同一である他の1つに対しては実行されません。

ここで本当に明らかな何かが欠けているような気がします。理由がわかれば額を平手打ちします。しかし、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が：hoverselectorで実行できないことを実行しません...

フィドル

.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 に答える