homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Using CSS to control color and background of hyperlinks

5+ Year Member

Msg#: 3192312 posted 7:13 pm on Dec 18, 2006 (gmt 0)

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?



WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Msg#: 3192312 posted 7:46 pm on Dec 18, 2006 (gmt 0)

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:



WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3192312 posted 8:49 pm on Dec 18, 2006 (gmt 0)

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 */
background-color: #2421A6;
border: 3px outset #6A78B5;
color: #ffc600;
font-weight: 700;
font-family:Georgia,verdana,arial,helvetica, serif;
#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">
<li><a href="link1.html">Purchase</a></li>
<li><a href="link2.html">Features</a></li>


5+ Year Member

Msg#: 3192312 posted 8:54 pm on Dec 19, 2006 (gmt 0)


Thanks for the help.

Problem solved!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved