A stupid CSS question- anybody know how? - GoFuckYourself.com

whorehole · 10-20-2010, 04:14 PM

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!

prezzz · 10-20-2010, 04:38 PM

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; }

The Truth Hurts · 10-20-2010, 04:40 PM

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';"

Amputate Your Head · 10-20-2010, 05:14 PM

Quote:

Originally Posted by The Truth Hurts

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.

Why · 10-20-2010, 06:16 PM

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

BestXXXPorn · 10-20-2010, 06:24 PM

Quote:

Originally Posted by prezzz

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; }

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...

FlexxAeon · 10-20-2010, 08:48 PM

Quote:

Originally Posted by BestXXXPorn

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...

whorehole · 10-21-2010, 10:15 PM

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

10-20-2010, 04:14 PM	#1
whorehole Confirmed User Join Date: Jan 2004 Posts: 299	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!

10-20-2010, 04:38 PM	#2
prezzz Confirmed User Industry Role: Join Date: Jul 2004 Posts: 959	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; }

10-20-2010, 04:40 PM	#3
The Truth Hurts Hb17uaaldwM Industry Role: Join Date: Nov 2002 Location: In Your Skull Posts: 15,152	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';"

10-20-2010, 06:16 PM	#5
Why MFBA Industry Role: Join Date: Mar 2003 Location: PNW Posts: 7,230	i believe prezzz is correct... im sure there are other ways but thats the simple and straightforward answer.

10-21-2010, 10:15 PM	#8
whorehole Confirmed User Join Date: Jan 2004 Posts: 299	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