Switching active class for multiple spans on mouseleave.

[k_cro]

Hey,

I am a total noob when it comes to javascript and jQuery, so I would totally appreciate the help.

I have a team design that requires an on hover and on mouse leave effect. The basic idea is for the images to swap out on hover as well as “fun fact” appear.

So the way I have it set up is within each of items I have 3 spans. 2 with background images and 1 with a background color and text. In scss I set each element to display none. And added an active class of display block.

The only problem is I’m not sure how to write the JS required. I tried a couple things but neither was really working. I posted my last attempt which i think is close to how it should start in my code pen.

Thanks in advance!! Sorry for any spelling or grammer errors. I am tired as hell :P

http://codepen.io/kcroake/pen/jPPqRo

[Paulie_D]

Could you just trim the Codepen down to a single example?

What works for one will work for all and it makes reviewing the code that much easier on us.

Help us, help you.

[k_cro]

Adjusted!

[Paulie_D]

I’m kind confused about what is supposed to be going on and what the Jquery is supposed to do.

A lot of what I’m seeing (at least as far as I can tell) probably doesn’t need JS/JQ.

[k_cro]

Basically on mouseleave I want the class active to move to the next span. And I’m not really sure how to write it or if I’m even starting it correctly.

[Author]

Posts