I've been struggling with this task for a while and can't seem to figure it out. I've been experimenting with this JSFiddle but I can't change the trigger from click to hover or mouse enter/exit. I tried implementing suggestions from similar issues, but I could only get the font to change once per mouseover. Am I approaching this correctly, or is there an easier way to achieve what I want?
It seems that the "click" trigger is set every 1.5 seconds, which closes the expanding nav bar on my website whenever it's clicked. My goal is to make the font rotate only when hovering over a specific id or class. I saw other questions mentioning stopping or clearing the interval... Thank you in advance for any help.
HTML
<div id="container">
<div id="change" class="one"></div>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Josefin+Slab|Quattrocento|Sacramento|Give+You+Glory|Poiret+One|Khand|Permanent+Marker|ABeeZee|Ubuntu|Questrial);
#change {
font-size:2em;
text-align:center;
color:#636466;
}
#change:before{
content:'Change during hover, stop when mouse leaves';
}
.one:before {
font-family:'Questrial';
}
.two:before {
font-family:'Give You Glory';
}
.three:before {
font-family:'Khand';
}
.four:before {
font-family:'Josefin Slab';
}
.five:before {
font-family:'Sacramento';
}
.six:before {
font-family:'ABeeZee';
}
.seven:before {
font-family:'Permanent Marker';
}
.eight:before {
font-family:'Ubuntu';
}
.nine:before {
font-family:'Poiret One';
}
JS
setInterval(function() {
var e = $.Event("click");
$('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').trigger('click');
}, 1500);
$('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').hover(function() {
this.className = {
three : 'four',
four : 'five',
five : 'six',
six : 'seven',
seven : 'eight',
eight : 'nine',
nine : 'one',
one : 'two',
two : 'three'
}[this.className];
});
//clearInterval(function() {?