CYCLING COLORS ON HOVER With JavaScript/jQuery

I'm trying to take a block of text, color each letter according to calculated position between HSL 0deg and 360deg, and on hover animate the colors to the right. I know this is weird, but bear with me. What I want is animated rainbow text on hover.

I've covered the logic of making all of this happen once, but can't get hover cycling behavior to work.

here is a link to the codepen.io:

I've tried using JavaScript mouse events and jQuery's .hover(). My initial thought was to set an interval on mouse enter and clear it on exit.

I'd truly appreciate any help on this obviously very important project.

CYCLING COLORS ON HOVER With JavaScript/jQuery

I'm trying to take a block of text, color each letter according to calculated position between HSL 0deg and 360deg, and on hover animate the colors to the right. I know this is weird, but bear with me. What I want is animated rainbow text on hover.

I've covered the logic of making all of this happen once, but can't get hover cycling behavior to work.

here is a link to the codepen.io: http://cdpn.io/txmlf

I've tried using JavaScript mouse events and jQuery's .hover(). My initial thought was to set an interval on mouse enter and clear it on exit.

I'd truly appreciate any help on this obviously very important project.

• javascript
• jquery
• css
• css-animations

• 1 Obviously very important project