Jquery mouseenter/mouseleave effect

Hey guys,

I basically want to have a simple effect where if you move your mouse over a single element (in this case, my icons at the bottom of my page) it will turn a different color, and when you leave it will revert back to the original color. As of right now, when I move my mouse over to one element, all of the other ones fire as well. I’am guessing it has to do with “this”, but I am not sure how to go about it.

Codepen: https://codepen.io/jmrtinz15/pen/LYPZZQR

If you’re just looking for a single hover effect over an element, there isn’t a need to use jquery or anything else, aside from the :hover pseudo class that CSS has. It makes things much simpler, all you would need to do is select the icon element in css with hover, and apply any styling over it.

You can check out this reference here for some examples https://www.w3schools.com/cssref/sel_hover.asp

EDIT: Also the reason why when you hover over one i element on your page, in your jquery, you’re basically telling it to change the color of all the i elements, regardless of which one is being hovered over.

Yep. That is way easier. Thank you!

You’re welcome! Glad that worked for ya.

check this examples on…css hover