Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Link color change on td cell hover

    Okay, to make a short story long - I am trying something that I have never tried before...and I'm lost on one thing and am left scratching my head. I had a look around the forum here and didn't quite find anything that matched what I am looking for, so I thought I would post and see if anyone had any thoughts.

    The objective: When the mouse cursor is inside of the <td> cell, the background image and text link color should change. With my current code, I can only change the background image. With css I am able to change the link color, but only when the text is hovered over, not when the cursor is inside of the table's cell.

    So, what I need is an idea of how to make the link color change when the cursor is inside of the cell, but not over the actual text link...does that make sense? lol.




    Here's the doctype I am using - It seems to me that no matter which I use it doesn't change much for this application - so it may be irrelevant:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Here is the actual <td> code:
    Code:
    <td align="center" class="main_nav"><a href="about.php" class="top_nav">About</a></td>
    And here are the accompanying .css codes:
    Code:
    a.top_nav:active { font-family: arial, verdana; color: #202020; font-weight: bold; text-decoration: none; }
    a.top_nav:visited { font-family: arial, verdana; color: #202020; font-weight: bold; text-decoration: none; }
    a.top_nav:link { font-family: arial, verdana; color: #202020; font-weight: bold; text-decoration: none; }
    a.top_nav:hover { font-family: arial, verdana; color: #FFFFFF; font-weight: bold; text-decoration: none; }
    
    
    td.main_nav { background-image: url('images/top_nav_white_bg.png'); background-position: top left; background-repeat: repeat-x; padding: 0px 5px 0px 5px; }
    td.main_nav:hover { background-image: url('images/top_nav_red_bg.png'); background-position: top left; background-repeat: repeat-x; color: #FFFFFF; padding: 0px 5px 0px 5px; }



    If anyone has any thoughts, I would appreciate them - sometimes I miss the easy things :P

    Thanks in advance!
    Last edited by -John-; 05-26-2010 at 05:25 PM. Reason: I can't type :P

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You could use a selector like
    Code:
    main_nav:hover a:link{
    
    }
    to change the color of links, though IE6 do not support :hover pseudo on any elements other than anchor.

    PS:
    Here is the actual <td> code:
    Code:
    <td align="center" class="main_nav"><a href="about.php" class="top_nav">About</a></td>
    Don't you know why using tables for layout is very bad? Since you are dealing with a list of links, the proper semantic tag to be used in this case would be the unordered lists. Google for CSS+horizontal+menu, and you'll get plenty of results (without tables!)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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