SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    0 Post(s)
    0 Thread(s)

    change font color on image hover over

    I want to link text to an image on a nav. I'm wondering what is the best way to change the font color when hovering over the image or text?

    I thought of doing a sprite, but I think its best to have the text as text and not an image.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Sydney, NSW, Australia
    25 Post(s)
    1 Thread(s)
    If the image and text are a part of the link then use

    a:hover, a:focus {color: #999999;}

    substituting the colour you want to change it to for 999999.

    If you want it to stay that colour when the mouse button or enter key is depressed then set it for a:active as well
    Stephen J Chapman, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Madison, WI
    34 Post(s)
    2 Thread(s)
    Am the worlds slowest typist.. and Stephen beat me to this... But on an added note: You can also make the images bg images to the <A> tags. OR target the container element ( most likely an LI ) .nav li:hover a{ color: myColor; } as long as the IMG and the A are contained within the LI , the text will change color, giving the appearance that the text changes color when the image is hovered over , even if the IMG tag is not part of the actual live link .

    hope that helps.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    463 Post(s)
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    I thought of doing a sprite, but I think its best to have the text as text and not an image.
    You can use a sprite image AND text. It's a technique called 'image replacement'. Here is an example:

    Paul has other nice examples, but I'm mobile, so have a look for them via his home page.


Posting Permissions

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