Jump to content

Change color of first letter of link when hovering


vchris

Recommended Posts

I think the title says it pretty clearly!Basically I have a link <a href="#">blah</a> and on hover I want the b to change to red let's say. The whole word is the link but only the b would change color on hover.This is only done in the navigation. I thought of doing two <a> tags for every link but is there a way with only css?

Link to comment
Share on other sites

I don't know how to do it with only css, or if you even can.Try this

<a href="url" onmouseover="this.getElementsByTagName('span')[0].style.color='your color'"><span>b</span>lah</a>

Link to comment
Share on other sites

This is the best i can offer :) split the <a> with a <span> and colour differently

<head><style>a.example{color: blue;text-decoration:none;}a:hover.example{color: red;} a.example span{color: blue;}a:hover.example span{color: blue;} </style></head><body><h1><a href="#" class="example">B<span>lah</span></a></h1></body>

Link to comment
Share on other sites

Wouldn't a simple usage of the :first-letter pseudo class do the trick?

a:first-letter:hover {color: red}

both IE and FF support it if we can trust the W3Schools' CSS reference.

Link to comment
Share on other sites

Wouldn't a simple usage of the :first-letter pseudo class do the trick?
a:first-letter:hover {color: red}

both IE and FF supported if we can trust the W3Schools' CSS reference.

Tried it and the whole word lights up....
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...