將鼠標懸停在一個元素上會影響另一個元素？

Question

看一看：a link。您可以看到，當您將鼠標懸停在頂部菜單欄上時，圖標會變爲藍色，並且當您將鼠標懸停在它們上面時，頁面鏈接會變成白色。我希望他們兩個都能在您做出懸停效果時鼠標懸停一個或另一個...實質上，我希望當你懸停在頁面鏈接上時，圖標變成藍色，並且當你將鼠標懸停在圖標上時，我希望頁面鏈接變成白色（顯然，我想要唯一的圖標在頁面鏈接上方點亮，當頁面鏈接被合適的時候點亮，反之亦然）。

我使用jQuery的圖像懸停效果...

和網頁鏈接代碼只是一個簡單的CSS懸停代碼。我想讓這兩個以某種方式作爲一個單元連接在一起。

我也想知道如果圖標可以單擊它（證明你是哪個頁面）後保持亮了起來......

ALSO ...

我有一個問題，即當網站被最小化爲一個更小的窗口......當你水平滾動時......包裝被切斷，你看到的只是白色空間！我已經玩了很多，這是沒用的！我做了一個漂浮，但我無法居中！

如果有人可以幫助解決這兩個問題，將不勝感激！

Answer 1

這並不太難實現。而不是使用a:hover，請使用li:hover a，當您將鼠標懸停在<li>的任何部分時，無論是鏈接還是圖像，這都可以使用。

前瞻：http://jsfiddle.net/Wexcode/FZjzG/

正如你所看到的，我其實去除你的形象標籤，並把它作爲你的<a>標記中的背景圖像。這種技術比使用圖像和jQuery要好得多。

如果你喜歡使用這種技術，有更好的方法來做到這一點。如果您有興趣瞭解更多信息，請閱讀CSS Sprites。

---

編輯：
要加入你目前的狀態，你有繞了兩種方式。一個簡單的方法就是將類current添加到作爲「當前」頁面的導航項目。

參見：http://jsfiddle.net/Wexcode/FZjzG/1/

---

請張貼在另外一個問題你的其他問題...你應該嘗試一個問題保持到每個崗位。

Answer 2

使用javascript交換圖像是非常古怪的事情。您應該將img和a合併爲一個元素，並使用css hover selector來交換背景圖像（like so）。

[編輯]：Here's an example using css-sprites.如果你要使用精靈，你應該將所有的資產淨值圖像爲一個圖像以節省HTTP請求。