Change class on mouseleave multiple times

Question

I have a logo at the top of my page, with a simple hover effect changing the logos color. What I would like to do is that every time the user hovers over it, the logo cycles through a few different hover effects. The first hover the logo turns red, the next hover the logo turns orange going through about 5 colors until starting over at red.

My thought was to use jquery to remove the old class and add a new one with a new hover effect, until the end at which point I would add the original class back. My code currently changes the logo to the red on the first hover, and then to the orange on the second hover, but then it gets stuck on orange.

This is my html:

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

This is my 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);}

This is my 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');
    });

Here: http://jsfiddle.net/U4LGD/1/... – Ani Mar 04 '14 at 19:45 — Ani, Mar 04 '14 at 19:45

Tim Nguyen · Accepted Answer · 2014-03-04T19:43:58.903

1

Have you thought of something like this ?

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;
    }
});

Example : http://jsfiddle.net/ntim/bT4T5/

edited Mar 04 '14 at 19:43

answered Mar 04 '14 at 19:38

Tim Nguyen

1,163
10
21

`$(this).addClass("logo_1"); index=1; $(this).removeClass("logo_1 logo_2 logo_3 logo_4 logo_5");` will erase the class you just added. – Karl-André Gagnon Mar 04 '14 at 19:40
This worked, except I removed logo_1 from "$(this).removeClass("logo_1 logo_2 logo_3 logo_4 logo_5");" It removed the class you just added in the line above it, so it would display an empty div. I wasn't sure if I should edit your answer or just add a comment. Thanks for the solve though! Edit: Someone already said it. – Sppryor Mar 04 '14 at 19:45
@Sppryor Made the code a bit smarter in case you add more logo classes. Also solved the issue. – Tim Nguyen Mar 04 '14 at 19:50

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

This should work :

var logoNumber = 1;

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

I shamelessly stole Tim Nguyen fiddle for my example : http://jsfiddle.net/bT4T5/1/

edited May 23 '17 at 11:49

Community

1
1

answered Mar 04 '14 at 19:39

Karl-André Gagnon

33,662
5
50
75

@Ani Thank but posted one at the same time :P – Karl-André Gagnon Mar 04 '14 at 19:48

score 0 · Answer 3 · edited May 23 '17 at 12:20

Yeah don't do that.

If the sequence of your logos is not important then:

1) Put all your logos URLs in a javascript Array.

2) Create a function that generates a random index between 0 and the size of your array

See here to generate random number : Javascript random integer

3) Use the generated random number as your logos array index to get the url of the image.

4) Use jquery to update the url

If the sequence is important then:

1) Store the urls in a javascript array by order.

2) Create a global index variable

3) Create a function that increments the global variable and returns the next image url in the array

4) On each mouse over of the tag, call the increment function and use the return value as URL.

score 0 · Answer 4 · answered Mar 04 '14 at 19:51

Here is another way 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);
});

Change class on mouseleave multiple times

4 Answers4