Question

Its hard to explain so i have an example

I have a left part that should remain black and a right part that is green which changes to red on hover see http://jsfiddle.net/z9jSS/

I want this to LOOK THE SAME but i want make the left part a link too and have the right part change color when i hover over it like the first link. I know how to disable the underline but what i dont know how to do is not have the left part change red on hover while having the right part change colors
http://jsfiddle.net/z9jSS/2/

Is there some trick i can do so a:hover will make a color change red but force the left part to stay black?

Answer 1

Simply override the styles for your spans:

.c a { text-decoration: none; color: inherit; }
.c a:hover .r { color:red; text-decoration: underline; }

Code: http://jsfiddle.net/z9jSS/21/