Question

我的页面顶部有一个徽标，简单的悬停效果会更改徽标颜色。我想做的是每次用户将鼠标悬停在它上面时，徽标会循环显示几种不同的悬停效果。第一个悬停徽标变为红色，下一个悬停徽标变成橙色，经过大约5种颜色，直到红色开始。

我的想法是使用jquery删除旧类并添加一个带有新悬停效果的新类，直到最后我将原始类添加回来。我的代码目前在第一个悬停时将徽标更改为红色，然后在第二个悬停时将徽标更改为橙色，但随后它会卡在橙色上。

这是我的HTML：

    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="/main" class="logo_1 logo"></a>
        </div>
    </div>

这是我的css：

    .logo {
        height:44px;
        width:161px;
        display:block;
    }

    .logo_1 {background-image: url(../images/logo.png);}
    .logo_1:hover {background-image: url(../images/red_logo.png);}

    .logo_2 {background-image: url(../images/logo.png);}
    .logo_2:hover {background-image: url(../images/orange_logo.png);}

    .logo_3 {background-image: url(../images/logo.png);}
    .logo_3:hover {background-image: url(../images/green_logo.png);}

    .logo_4 {background-image: url(../images/logo.png);}
    .logo_4:hover {background-image: url(../images/blue_logo.png);}

    .logo_5 {background-image: url(../images/logo.png);}
    .logo_5:hover {background-image: url(../images/purple_logo.png);}

这是我的jquery：

    $('.logo_1').mouseleave(function(){
       $(this).addClass('logo_2');
       $(this).removeClass('logo_1');
    });
    $('.logo_2').mouseleave(function(){
       $(this).addClass('logo_3');
       $(this).removeClass('logo_2');
    });
    $('.logo_3').mouseleave(function(){
       $(this).addClass('logo_4');
       $(this).removeClass('logo_3');
    });
    $('.logo_4').mouseleave(function(){
       $(this).addClass('logo_5');
       $(this).removeClass('logo_4');
    });
    $('.logo_5').mouseleave(function(){
       $(this).addClass('logo_1');
       $(this).removeClass('logo_5');
    });

Answer 1

你有没有想过这样的事情？

var index = 1;
$(".logo").mouseleave(function() {
    $(this).removeClass("logo_"+index);

    index +=1;

    if(index <= 5) {
       $(this).addClass("logo_"+index);
    }
    else {
        $(this).addClass("logo_1");
        index=1;
    }
});

示例：http://jsfiddle.net/ntim/bT4T5/

Answer 2

这应该有效：

var logoNumber = 1;

$('.logo').mouseleave(function(){
    var $this = $(this).removeClass('logo_' + logoNumber);
    logoNumber++;
    if(logoNumber > 5) logoNumber = 1;
    $this.addClass('logo_' + logoNumber);
})

我无耻地偷走Tim Nguyen为我的榜样：http://jsfiddle.net/bT4T5/1/

Answer 3

是的，不要那样做。

如果您的徽标序列不重要，则：

1）将所有徽标网址放在javascript数组中。

2）创建一个函数，生成0和数组大小之间的随机索引

请参阅此处生成随机数：Javascript random integer

3）使用生成的随机数作为您的徽标数组索引来获取图像的URL。

4）使用jquery更新网址

如果序列很重要，那么：

1）按顺序将网址存储在javascript数组中。

2）创建全局索引变量

3）创建一个递增全局变量的函数，并返回数组中的下一个图像URL

4）在每个鼠标悬停在标签上，调用增量函数并使用返回值作为URL。

Answer 4

以下是 FIDDLE

的另一种方式

<div class="lol img0" data-img="0"></div>

.lol {
    height:200px;
    width:300px;
}
.img0 {
    background:url("http://lorempixel.com/400/200/nature/1/") no-repeat;
}
.img1 {
    background:url("http://lorempixel.com/400/200/nature/2/") no-repeat;
}
.img2 {
    background:url("http://lorempixel.com/400/200/nature/3/") no-repeat;
}
.img3 {
    background:url("http://lorempixel.com/400/200/nature/4/") no-repeat;
}

$('.lol').mouseenter(function () {
    var data = $(this).attr('data-img');
    $(this).removeClass('img' + data);
    data++;
    if (data > 3) data = 0;
    $(this).attr('data-img', data);
    $(this).addClass('img' + data);
});

多次更改mouseleave上的类

4 个答案: