...

View Full Version : hover over a td



deepna
10-25-2011, 01:18 AM
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

sunfighter
10-25-2011, 03:41 PM
You need javascript. here is example - you need to take care of the onmouseout to change back or things stay this way:

<!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>

teedoff
10-25-2011, 04:05 PM
Not sure you need javascript.

I just tested:


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum