SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    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
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    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

    javascriptexample.net, 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
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    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
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    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: http://www.pmob.co.uk/temp/navimagereplace.htm

    Paul has other nice examples, but I'm mobile, so have a look for them via his home page.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •