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悬停附加该类。 希望您能理解，因为这是最简单的方法。 上帝的运气