How to have each link have their own respective color on hover

[danbrooks1108]

In my menu I want each link to change to a different color on hover. One I want to change to green, one to blue, and one to red. I tried it one way and got them to change colors like I wanted, but it wouldn’t stay inline, and I tried it another way and they stayed inline but wouldn’t change colors. I’m sure I’m just missing some stupid thing, but I can’t figure it out.
Any suggestions?
Thank you.

.i-love {css-tricks: alot;
}

[Beverleyh]

I want each link to change to a different color on hover

You could give them all their own class and target them individually. Or use the nth-child selector https://css-tricks.com/almanac/selectors/n/nth-child/

But you say there seems to be an underlying problem with links moving from inline to something else?

I’m sure I’m just missing some stupid thing, but I can’t figure it out.

Unfortunately, we can’t troubleshoot something we can’t see. We can help more if you post what you have in a basic CodePen demo. Show us what you’re doing either way to change the hover colour and we should be able to offer suggestions, based on your own code, as to why the inline shift is happening.

[danbrooks1108]

Well it’s kind of a mess but I got it to work.

[Mod edit – Codedump removed]

Sorry about that. I’m new and I forgot all about using the codepen.

[Paulie_D]

Please…use Codepen.io to make a demo as requested

Codedumps aren’t appreciated.

[Chris Coyier]

http://codepen.io/chriscoyier/pen/GWgrGb

[danbrooks1108]

THANK YOU!!
That is exactly what I need, and SO much neater than the way I ended up doing it.
I appreciate it very much!
The only thing I changed was I added li {display: inline-block; }
to make it go across instead of down.

[Author]

Posts