CODEWITHSUNDEEP
css
user34537
user34537

Reputation:

How do i change the color of a specific part of a link on hover?

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?

Upvotes: 2

Views: 129

Answers (5)

thirtydot
thirtydot

Reputation: 228182

Try this:

.c a {
    color: #000;
    text-decoration: none
}
.c a span:first-child + span {
    text-decoration: underline;
    color: green;
}
.c a:hover span:first-child + span {
    color: red
}

See: http://jsfiddle.net/thirtydot/z9jSS/31/

This has the benefit of not needing either of the .l or .r classes.

It will work in all browsers except IE6.

Upvotes: 1

Alain
Alain

Reputation: 27220

Seems like everything above was missing one thing or another. This includes everything you asked for, with part of the link being plain black text, and the rest being a green underlined link that turns red when hovering.

http://jsfiddle.net/z9jSS/30/

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

enter image description here

Upvotes: 2

Madara's Ghost
Madara's Ghost

Reputation: 174967

Override the styles with a higher specificy style.

.c a:hover span.l { color: blue; }

Working Example.

Upvotes: 1

mreq
mreq

Reputation: 6542

wrap the part of anchor inside a span or an other tag

try this jsfiddle

Upvotes: 1

Samich
Samich

Reputation: 30115

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/

Upvotes: 5

Related Questions