javascript - 紛らわしいホバーエフェクト

Question

このナビゲーションバーを作成しました: http://cdpn.io/tdnfv (2 つのチュートリアルの助けを借りて、私の評判が低いため、ここにリンクを投稿することはできません。リンクは codepen にあります)

ご覧のとおり、青いバーは順調に動いており、アイテム 6 の下に完全に収まっていますが、アイテム 6 に向かって「不調和」が増しています。これの原因となっているコードを特定できません! また、移動バーの「デフォルトの位置」を変更する方法がわかりません。つまり、ホバーイベントがないときの位置です。

助けていただければ幸いです。よろしくお願いします。

Answer 1

それは、それぞれの間にある小さな空白です<li>。これに対処するにはさまざまな方法がありますが、私のお気に入りは、フォント サイズを削除してから、実際にテキストを含む要素で元に戻すことです。

ul {
    font-size: 0;
}
ul li a {
    font-size: 18px;
}

PS、それは本当に素晴らしいコンセプトです。