homepage Welcome to WebmasterWorld Guest from 54.196.57.4
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Using CSS to control color and background of hyperlinks
larryparker




msg:3192314
 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?

 

Fotiman




msg:3192347
 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:
LoVeHAte

Link
o
Visited
e
Hover
Active
t
e

rocknbil




msg:3192428
 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 */
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




msg:3193741
 8:54 pm on Dec 19, 2006 (gmt 0)

Fotiman,

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved