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 3 of 3

Thread: hover over a td

  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    13
    Thanks
    5
    Thanked 0 Times in 0 Posts

    hover over a td

    Hi,

    I have a specific requirement where in a table if someone hovers over a td,
    1) the background color should change to grey
    2) the text color in the td should change to white
    3) the text in another td should change to a different value

    Can we do this via normal css or this will need javascripting ? Any example code ?

    Thanks,
    Deepna

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    You need javascript. here is example - you need to take care of the onmouseout to change back or things stay this way:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    table
    {
    	margin-left:auto;
    	margin-right:auto;
    }
    </style>
    <script type="text/javascript">
    function change(){
    	document.getElementById('them').style.backgroundColor ='gray';
    	document.getElementById('me').style.color='white';
    	document.getElementById('name').innerHTML='What?';
    }
    </script>
    </head>
    <body>
    <table width="200" border="0" cellpadding="3" cellspacing="1">
    <tr>
    <td style="width: 27px;">Name</td>
    <td style="width: 4px;">:</td>
    <td id="them" style="background-color: red; width: 35px;" onmouseover="change();">
    </td>
    </tr>
    
    <tr>
    <td id="name" style="width: 27px;">Place</td>
    <td style="width: 4px;">:</td>
    <td id="me" style="background-color: blue; color: red; width: 35px;">Hello world
    </td>
    </tr>
    
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="submit" name="Submit" value="Submit" /> <input type="reset" name="Submit2" value="Reset" /></td>
    </tr>
    </table>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    deepna (10-25-2011)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Not sure you need javascript.

    I just tested:

    Code:
    td:hover {
    	background-color: #cccccc;
    }
    in IE9, Chrome, and FF7 and it seems to work fine. This will affect EVERY <td>, so you may want to assign classes or id's to the ones you want the hover affect on.
    Teed


  •  

    Posting Permissions

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