Sol Sol - 1 year ago 82
CSS Question

Alternate link colors on hover?

I've looked around here already and I can't find anything that answers my question or that actually works, so maybe some of you can give me a solution for this.

I'm creating a blog template and I'd like that the posts' links show two different colors on hover, alternated. Say, link1 hovers on red, link2 hovers on green, link3 hovers on red again, link4 on green, and so on.

How can I make this happen?

EDIT: Someone removed the part where I mentioned I had already researched about this, I don't why they did that.

Here's the code I found in another question, which is not working:

body:nth-child(odd) a:hover{ background-color:#dedede; color: #996633; }
body:nth-child(even) a:hover{ background-color:none; color : #FF0000}

Also, I apologize if my question has annoyed some of you. It wasn't my intention. There was no need to be rude though.

Answer Source

You can do that with the :nth-child selector in your css:

a:nth-child(odd):hover {
color: red;

a:nth-child(even):hover {
color: green;

Working fiddle here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download