jQuery在導航鏈接鼠標懸停時更改背景顏色

Question

當我將鼠標懸停在導航菜單中的不同鏈接上時，我想更改背景的顏色。 說，鏈接一..背景變為紅色，導航2變為藍色，導航3背景變為綠色等。但是現在，當我在這些頁面上時，背景與鼠標懸停時的背景相同鏈接。 因此，第1頁背景將為紅色，第2頁=藍色，第3頁=綠色等。

Answer 1

將所有鏈接的背景顏色信息存儲在cookie中，當您訪問這些頁面之一時，獲取所有cookie並比較它們在當前頁面中的值並設置該顏色的背景。

例如，當您將鼠標懸停在link1上時，設置一個類似於該字符串對的cookie“ link1color”：“ red”，依此類推。 當您訪問這些頁面之一時，獲取cookie，找到與頁面匹配的cookie，獲取background-color並更新背景。

Answer 2

你可以做這樣的事情。

<a href="#" class="change-bg-color" data-bg-color="#ff0000">Link 1</a>
<a href="#" class="change-bg-color" data-bg-color="#00ff00">Link 2</a>
<a href="#" class="change-bg-color" data-bg-color="#0000ff">Link 3</a>

<script>
    $('a.change-bg-color').hover(function(){
        // Change you color
        $(body).css('background-color', this.getAttribute('data-bg-color') );
    },function(){
        // Back to the original color
        $(body).css('background-color', '#fff' ); // Supposing that #fff is your default bg color
    });
</script>

而且，如果您希望“鏈接1”，“鏈接2”和“鏈接3”頁面的背景顏色不同，最好的方法應該是使用特定於頁面的CSS類。 它不需要javascript。

Answer 3

將您的背景色存儲在數組中，並根據當前頁面上的需要在js / jquery的幫助下從數組值中相應地更改值，因為如果數組是全局定義的，則您可以在應用程序中的任何位置進行快速訪問而訪問率低記憶。

Answer 4

方法：

1. CSS中有三個不同的類-說bkBlue，bkRed，bkGreen

   .bkBlue {background-color：'blue'}

2. 使用懸停事件，使用addClass和removeClass更改應用於鏈接的類。

3. 將當前類的值存儲在會話變量中。

4. 將會話變量中的類添加到當前頁面。

Answer 5

另一種方法是，如果nav數量不多，則使用不同的id / class保留不同的懸停類，並使用您的特定nav懸停附加該類。 希望您能理解，因為這是最簡單的方法。 上帝的運氣