[SOLVED] hyperlink :hover

[tomdelonge]

i want a hyperlink to be where when the mouse goes over it, then the two end characters change color (say from red to blue, while all the other characters are green)

 

before hover:

hyperlink

after hover:

hyperlink

 

how do i do that? i prefer to not use javascript, but if i must, then i must.

[DarkWater]

Break out the Javascript.

[TheFilmGod]

first-letter pseudo class could change your first letter. I don't think you can use pure css to change the last letter. You may need to use javascript.

[haku]

<a href="#"><span class="first">h</span>yperlin<span class="last">k</span></a>

a
{
   color: #008070;
}

.first, .last
{
   color: #0000FF;
}

a:hover
{
   color: #FE0000;
}

a:hover .first, a:hover .last
{
   color: #8044BF;
}

 

 

[tomdelonge]

that's what i'm talking about. (i don't know how i couldn't figure it out). thanks!

 

so i just put the spans inside the anchor, which seems to work perfectly. no javascript either thanks.

[haku]

Note: This almost definitely won't work in IE6. If you want it to work in IE6, you have to use javascript.