SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing background color with a:hover - NOT on images??

    is there a way to use a:hover to change the background color for text links but NOT have it change on images? it works fine in NS6.1 but changes on both text and images in IE 5.5....nothing i'm trying works and i haven't even gotten past those two browsers yet....

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps creating a second rule for IMG tags nested inside A tags will do it for you...

    eg:

    A{ background: #F00; }
    A:hover { background: #C00; }
    A IMG:hover { background: #F00; }


    or possibly even:

    A IMG:hover { background: default; }

    I haven't tried it, but if the browser adheres appropriately to CSS standards, it should work. (That's always questionable with MSIE, though)

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i agree with randem - you need to use a variety of classes to get different results... unless you want to use javascript...
    or you can assign a hover state to the TD that the text is in...

    i guess there are a variety of methods depends on what you want to do...

    if you want to post a link... we can check it out for you.

    good luck

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The simple way around this is to place border="0" inside each IMG tag. However, if you really WANT to have an image border then use a seperate class like so:

    a:link { font-family: verdana; color: #FFFFFF; font-size: 9pt;verdana}
    a:hover { font-family: verdana; color: #66FF00; font-size: 9pt;verdana}
    a:visited { font-family: verdana; color: #666666; font-size: 9pt;verdana}
    a:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt;verdana}

    a.img:link { font-family: verdana; color: #FFFFFF; font-size: 9pt;verdana}
    a.img:hover { font-family: verdana; color: #66FF00; font-size: 9pt;verdana}
    a.img:visited { font-family: verdana; color: #cccccc; font-size: 9pt;verdana}
    a.img:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt;verdana}

    Normal page (or navigation links) would use the standard <a href="somepage.html"> while any IMG that was a link would look like <a href="somepage.html" class="img"><img src="someimage.jpg"></a>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanx! i hadn't thought of trying background: default....works like a charm.


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
  •