ある要素にカーソルを合わせると、別の要素にカーソルが移動しますか？

Question

見てください：a link。上のメニューバーのアイコンが上に来ると青色に変わり、その上にマウスを置くと下にあるページのリンクが白くなります。マウスオーバーで1つまたは他のもの...本質的には、あなたがページリンクの上にマウスを置いたときにアイコンが青くなるようにしたいのですが、アイコンの上にマウスを置くとページリンクが白くなるようにしたいと思います。適切なページリンクがホバリングされているときに点灯するページリンクの上にあり、逆の場合も同様です）。

私は画像ホバー効果のためのjQueryを使用しています

...とページのリンクコードは単純なCSSコードをホバーです。どういうわけか、これらの2つを1つの単位としてリンクさせたいと思います。私は問題がある

ALSO

アイコンが、それは（あなたが上にあるどのページを示すために）クリックした後、点灯したままできれば私も思っていた

...

...どこ際にウェブサイト小さなウィンドウに最小化されます...あなたが水平にスクロールすると...ラッパーが途切れて、あなたが見るのは空白です！私はそれをたくさんして遊んだし、それは役に立たなかった！私はフロートを残しましたが、それを中心にできませんでした！

誰かがこの2つの問題を解決することができれば、それは非常に感謝しています！

Answer 1

これは達成するのが難しくありません。 a:hoverを使用する代わりにli:hover aを使用してください。<li>の任意の部分にカーソルを置くと、その画像がリンクか画像かに関係なく機能します。

プレビュー：http://jsfiddle.net/Wexcode/FZjzG/

あなたが見ることができるように、私は実際にあなたのイメージタグを削除し、あなたの<a>タグの内側に背景画像としてそれを置きました。この手法は、画像とjQueryを使用するよりもはるかに優れています。

このテクニックを使用するのが好きなら、より良い方法があります。詳細を知りたい場合はCSS Spritesを読んでください。

---

編集：
があなたの現在の状態を追加するには、あなたがそれについて行くの2つの方法があります。簡単な方法は、現在のページであるナビゲーション項目にクラスcurrentを追加することです。

参照：http://jsfiddle.net/Wexcode/FZjzG/1/

---

別の質問では、あなたの他の問題を投稿してください...あなたは、各ポストに一つの質問を維持しようとすべきです。

Answer 2

画像をスワップするためにjavascriptを使用するのはかなり古いです。 imgとaを1つの要素に統合し、css hover selectorを使用して背景イメージ（like so）を置き換える必要があります。

[編集]：Here's an example using css-sprites.スプライトを使用する場合は、http要求を節約するために、すべてのナビゲーション画像を1つの画像に結合する必要があります。