Results 1 to 9 of 9

Thread: font hover

  1. #1
    Join Date
    Dec 2005
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default font hover

    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.

    Code:
    /* ---------------- */
    /*      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;
    }

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

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

    Code:
    a:hover {
     color: blue;
    }
    or

    Code:
    .class a:hover {
      color: green;
    }
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Dec 2005
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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")

  4. #4
    Join Date
    Dec 2005
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Try this:

    Code:
    #footer-navigation li a:hover {
    background:#C3DCF1;
    color:black;
    }
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  6. #6
    Join Date
    Dec 2005
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    whatever:link {
    some_property:some_value;
    }
    
    whatever:hover {
    same_property:another_value;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    May 2007
    Location
    Viet Nam
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

    Code:
    whatever:link {
    some_property:some_value;
    }
    
    whatever:hover {
    same_property:another_value;
    }

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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Spiritvn View Post
    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:

    HTML Code:
    <a href="some_page.htm">Link</a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •