Color changing logo

by ntim

HTML

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

CSS

.logo {font-family:Arial, sans-serif;font-size:20px;text-decoration;none;transition:all 0.3s}
.logo_1 {color:red;}
.logo_2 {color:blue;}
.logo_3 {color:green;}
.logo_4 {color:pink;}
.logo_5 {color:gray;}

JavaScript

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