Jump to content

Change color of first letter of link when hovering


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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...