Using CSS to control color and background color of hyperlinks

I'm really frustrated by what seems to be a ridiculously easy task, and yet....

I'm trying to create a web page with a series of entries, each entry linked to another page.
I want each entry to appear as white text against a black background, but with the text turning blue when the mouse hovers over it.

This is what I've tried so far:

<style type="text/css">
span a:link{color:white; background-color:black}
span a:hover{color:blue; background-color:black}</style>

with the <a> tag being placed inside of the <span> tag. (<span><a>ENTRY</a></span>)

This gives me what I want when I hover, but otherwise I get the browser default (purple text against no background, as though the "span a:link{}" part of the code were being completely ignored. So now I'm wondering if what I'm trying to do can even be done.

I also tried this using an <h1> tag in place of the <span> tag, but with no change.

Any suggestions???

 

Hi there

a:link attribute will work only for unvisited links. Your problem is probably caused by the fact, that you have already visited that linked address some time ago and your web browser still remembers that.

I'd suggest changing that code into:

<style type="text/css">
span a{color:white; background-color:black} [b][1*][/b]
span a:hover{color:blue;} [b][2*][/b]
</style>

Code (markup):

which will cause that:
[1*] each and every kind of links (unvisited, visited and hovered) will have "white" (text) color and "black" background-color
[2*] only hovered links will have the (text) color changed to "blue" (all other attributes are set by [1*] and remain unchanged)

Hope that helps!

Kindly regards,
L.

 

Superb !!!

This worked like a charm.

Thank You, Lichurec. You're a LifeSaver.

 

I thought I knew the CSS basics but I never knew that, thanks for the info!

 

@ larryparker - I try my best ;]

@ Austars - It's all in the W3C specification =]

 

Me 2, I never knew you could pass arguments in "[]", cool stuff..

 

Thanks, that site has some CSS stuff I hadn't ever even heard of

 

Paddom?
[1*] and [2*] are just ways of numbering my "footnotes"
Exact code looks like:

<style type="text/css">
span a{color:white; background-color:black}
span a:hover{color:blue;}
</style>

Code (markup):

As for the css - each and every child element (and in this case - we may consider a:link pseudoclass as a child of whole a family) will inherit previously specified attributes or will inherit web browser default values - if none is provided in CSS

 

Just remember that pseudo-classes are NOT widely recognisable by web browser (especially the one with big e)

let me just mention that :hover pseudo-class won't work in Ie for any other element than link ( <a href=".."..>..</a> ) and should be available at least for DIVs or SPANs (just have a look at my website in both: FX & Ie)

L.

 

Hmm, that's why I was wondering that why I have never seen it like that... My mistake, that I took footnotes as arguments Oh well, mistakes happen...

 

We all re are only humans.. er.. well.. at least most of us ;}

Anyway - I'm glad we've cleared that out

Kindly regards,
l.