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

Question

看一看： 一個鏈接 。 您可以看到頂部菜單欄上的圖標在您將鼠標懸停在其上時變為藍色，並且當您將鼠標懸停在它們上方時，它下面的頁面鏈接會變為白色...我希望他們兩個都可以在您進行懸停效果時鼠標懸停其中一個......本質上，我希望當你將鼠標懸停在頁面鏈接上時，圖標會變成藍色，我希望當你將鼠標懸停在圖標上時，頁面鏈接會變為白色（顯然我只想要圖標在頁面鏈接上方，當正確的頁面鏈接被懸停時點亮，反之亦然）。

我正在使用jquery進行圖像懸停效果...

頁面鏈接代碼只是一個簡單的css懸停代碼。 我希望將這兩者作為一個單元聯系在一起。

我也想知道點擊它后圖標是否可以保持亮起（顯示你所在的頁面）...

也...

我有一個問題，當網站最小化到一個較小的窗口...當你水平滾動...包裝被切斷，所有你看到的是白色空間！ 我玩過它很多，沒用！ 我做了一個浮動，但后來我無法居中！

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

Answer 1

使用javascript交換圖像非常古老。 您應該將img和a合並到一個元素中，並使用css懸停選擇器來交換背景圖像（ 如此 ）。

[編輯] ： 這是一個使用css-sprites的例子。 如果您要使用精靈，您可能應該將所有這些導航圖像合並到一個圖像中以保存http請求。

Answer 2

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

預覽： http ： //jsfiddle.net/Wexcode/FZjzG/

如您所見，我實際上刪除了您的圖像標記，並將其作為背景圖像放在<a>標記內。 這種技術比使用圖像和jQuery要好得多。

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

---

編輯：
要添加當前狀態，您有兩種方法可以實現。 一種簡單的方法就是將類current添加到作為“當前”頁面的導航項。

請參閱： http ： //jsfiddle.net/Wexcode/FZjzG/1/

---

請在另一個問題中發布您的其他問題...您應該嘗試在每個帖子中保留一個問題。