Jquery在导航链接鼠标悬停上更改背景颜色

时间:2013-08-23 05:35:15

标签: javascript jquery css background mouseover

当我将鼠标悬停在导航菜单中的不同链接上时,我想更改背景颜色。说,链接一个..背景变为红色,导航2背景变为蓝色,导航3背景变为绿色等等。但是现在,当我在这些页面上时,背景与鼠标悬停时相同链接。因此,第1页背景为红色,第2页为蓝色,第3页为绿色等。

5 个答案:

答案 0 :(得分:1)

存储Cookie中所有链接的背景颜色信息,当您访问其中一个页面时,获取所有Cookie并比较当前页面的值并设置该颜色的背景。

例如,当您将鼠标悬停在link1上时,设置一个类似于这对字符串“link1color”的cookie:“red”等等。 当您访问其中一个页面时,cookie会找到该页面的匹配cookie并获得背景颜色并更新背景。

答案 1 :(得分:0)

你可以这样做。

<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。

答案 2 :(得分:0)

将您的背景颜色存储在一个数组中,并根据您当前页面上的需要,借助js / jquery从数组值中相应地更改值,因为如果数组是全局定义的,那么您可以快速访问应用程序中的任何位置访问和低内存。

答案 3 :(得分:0)

方法:

  1. 在CSS中有三个不同的类 - 比如bkBlue,bkRed,bkGreen

    .bkBlue {  背景颜色:'蓝色' }

  2. 在悬停事件中使用,使用addClass和removeClass更改应用于链接的类。

  3. 将当前类值存储在会话变量中。

  4. 将会话变量中的类添加到当前页面。

答案 4 :(得分:0)

另一种方法是使用不同的id / class保持不同的悬停类,如果nav不是大数并且使用您的特定导航悬停附加这些类。我希望你理解,因为这是最简单的方法。 Gud运气