font hover

[Chadi]

I'm trying to figure out how to change the color of links (on hover only) from the default white (linked) to any other color of my choice (linked, but hovered).

My css is below. I got the background (li) to hover with a different color, just cannot figure out the proper method to change the link color on hover as well.


/* ---------------- */
/* footer */
/* ---------------- */


#footer {
margin:auto;
margin-top:10px;
padding:18px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\"";
voice-family:inherit;
width:798px;
background-color:#9ec5e5;
border:1px solid #93c5ef;
border-top:none;
}

#footer-navigation {
color:white;
font-size:11px;
line-height:14px;
}

#footer-navigation li:hover {
background:#C3DCF1;
color:black;
}

#footer-navigation a {
color:white;
}

.f_home {
width:40px;
float:left;
margin-right:8px;
}

.f_services {
width:150px;
float:left;
margin-right:8px;
}

.f_whyus {
width:90px;
float:left;
margin-right:8px;
}
.f_support {
width:120px;
float:left;
margin-right:8px;
}
.f_about {
width:120px;
float:left;
margin-right:8px;
}

.footer-navigation-heading {
color:white;
font-size:11px;
font-family:inherit;
font-weight:normal;
background-color:#8bb6d9;
margin:0px;
padding:6px;
}


ul.f_services, ul.f_whyus, ul.f_support, ul.f_about
{
margin:0px;
padding: 0px;
}

ul.f_services li, ul.f_whyus li, ul.f_support li, ul.f_about li
{
list-style:none;
margin:0px;
padding:3px 0px 3px 0px;
border-bottom:1px dotted #fff;
}

[thetestingsite]

Depending on how your links (the ones you want to change the color), you may want to do something like this for them:



a:hover {
color: blue;
}


or



.class a:hover {
color: green;
}


Hope this helps.

[Chadi]

Thanks but didn't work

I tried a few methods

#footer-navigation li:hover {
background:#C3DCF1;
}

.class a:hover {
color:black;
}

***********

#footer-navigation li:hover {
background:#C3DCF1;
}

a:hover {
color:black;
}

************

#footer-navigation li:hover {
background:#C3DCF1;
}

#a:hover {
color:black;
}



None worked.

The first portion of each (#footer-navi....) is the one that makes the background hover (for "li")

[Chadi]

I was able to get the link to another color, but on link hover instead of entirely <li> hover *with* the link.

#footer-navigation {
color:white;
font-size:11px;
line-height:14px;
}

#footer-navigation li:hover {
background:#C3DCF1;
color:black;
}

#footer-navigation a {
color:white;
}

#footer-navigation a:hover {
color:#2fb4c8;
}



I really want the linked font color to change automatically *with* the <li> entirely, not just link hover itself.

[thetestingsite]

Try this:



#footer-navigation li a:hover {
background:#C3DCF1;
color:black;
}


Hope this helps.

[Chadi]

That also did not work. It made it change color and background only on text, not actual entire <li> block (equivalent to cell hover)

[jscheuer1]

First, I only really read the first post in this thread. The solution is simple unless you are also doing something else that stops it from working:


whatever:link {
some_property:some_value;
}

whatever:hover {
same_property:another_value;
}

[Spiritvn]

First, I only really read the first post in this thread. The solution is simple unless you are also doing something else that stops it from working:


whatever:link {
some_property:some_value;
}

whatever:hover {
same_property:another_value;
}



whatever:hover not work with IE or i'm wrong?

[jscheuer1]

whatever:hover not work with IE or i'm wrong?

Well, in IE 6 and below, 'whatever' must be an anchor link - an a tag with an href attribute:


<a href="some_page.htm">Link</a>