CODEWITHSUNDEEP
jqueryhtmlcss
Sppryor
Sppryor

Reputation: 3

Change class on mouseleave multiple times

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

Upvotes: 0

Views: 186

Answers (4)

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

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

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

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/

Upvotes: 1

TchiYuan
TchiYuan

Reputation: 4278

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.

Upvotes: 0

Tim Nguyen
Tim Nguyen

Reputation: 1213

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/

Upvotes: 1

Related Questions