Using CSS to control color and background of hyperlinks

[larryparker]

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?

[Fotiman]

You've only defined the color for :link and :hover. :link applies only to non-visited links. You're seeing purple because those links have been visited. Also, you haven't defined the "active" link either (a link in the process of being clicked). Change your code to this and it should work:

span a:link,
span a:visited {color:white; background-color:black}
span a:hover,
span a:active {color:blue; background-color:black}

Note, the order that these are defined in is important. Remember this:
LoVeHAte

Link
o
Visited
e
Hover
Active
t
e

[rocknbil]

LOL Love Hate . . . awesome. :-)

If what you are trying to do involves large blocks on that background area, try this. It's something I tracked down and found, based on info posted by encyclo. The trick is to use display:block on a link. These are large rectangular "buttons" rendered completely from CSS. When you mouse over any area, the entire BG changes as if it were an image mouseover. As you can see my links are out of order but it still works in all browsers, including the infamous IE 5.1 Mac. :-) Don't know why, but it does. (?)

#nav-link  {  
 width: 11em;  
 background-color: #DFE5FF;  
 border-right: 2px solid #B2BBE1;  
 border-bottom: 2px solid #B2BBE1;  
} 
#nav-link ul { text-align:center; padding: 3px; } 
#nav-link li { list-style:none; padding: 6px; } 
#nav-link a:link {  
 display: block; /* Remember display block on the link is what makes the mouseover work in IE */ 
 padding:6px; 
 background-color: #2421A6; 
 border: 3px outset #6A78B5; 
 color: #ffc600;  
 font-weight: 700; 
 font-family:Georgia,verdana,arial,helvetica, serif; 
 text-decoration:none; 
} 
#nav-link a:active { color: #ff0000; font-weight: 700; } 
#nav-link a:visited { color: #ffc600; font-weight: 700; } 
#nav-link a:hover { color: #2421A6; background-color: #ffc600; border: 3px outset #ffc600; } 

And the HTML:

<div id="nav-link"> 
 <ul> 
 <li><a href="link1.html">Purchase</a></li> 
 <li><a href="link2.html">Features</a></li> 
 </ul> 
</div> 

[larryparker]

Fotiman,

Thanks for the help.

Problem solved!