A stupid CSS question- anybody know how?
 

This is something I've never figured out, I've researched it, but never found an answer- it may not even be possible, but I figured somebody on here would know if it is.


I've got a page all setup with tons of CSS.

but say I have one little bit of text that I want to make a color, and ALSO be hyperlinked, and have a seperate hovercolor.

I want to just code it inline using a SPAN tag, and not write a giant bunch of CSS code just for this one word.

So the text link should be white, and when hovered over, it would turn black.


This will turn the text white, etc:


<a href="http://www.myurl.com" ><span style="font-family: arial; font-weight: bold; font-size: 12px; color: white; ">CLICK HERE</span></a>


But can I define a hover color in that span tag?


I've never found any code that would do it..

can it be done?


Thanks for any help!

If it's just one instance in the code, drop the span part, give the <a> an id and add 2 lines of code to the css file.

<a href="http://www.myurl.com" id="thisone">CLICK HERE</a>

a#thisone:link, a#thisone:visited { font: 700 12px Arial, sans-serif; color: #fff; }
a#thisone:hover, a#thisone:active { color: #000; }

pretty sure you cant do pseudo shit inline.
add something like this silly shit to your anchor
onmouseover="this.style.color='value';"
onmouseout="this.style.color='value';"

hey dude... haven't seen you around in a while.

i believe prezzz is correct... im sure there are other ways but thats the simple and straightforward answer.

Perfect, there's no need for a span inside the anchor tag... Especially if you want a hover state as some browsers will only recognize anchors to have :hover...

I would probably opt for a class instead of an id in case you want to reuse it later:

<a href="http://www.whatever.com" class="blackWhite">Click Here</a>

a.blackWhite, a.blackWhite:visited { font: ...; color: #fff; }
a.blackWhite:hover, a.blackWhite:active { color: #000; }

Then you can just use the css class on any anchor tag you may want but for sure, as prezzz used... break it out into the style sheet. That way you can update it whenever you want without searching through mounds of copy... :2 cents:

:thumbsup

Thanks for the replies guys

I was trying to avoid using an id or class (or having to add shit to the css file) and just be able to whip it out right there on the line, but oh well :)

The Truth Hurts- I will try that technique :)