Posted by: dougmanic Oct 9 2006, 09:41 PM
Suppose you have a table, something like this:
CODE
<table>
<tr>
<td>Col 1</td><td>Col 2</td><td>Col 3</td>
</tr>
<tr>
<td>Col 1</td><td>Col 2</td><td>Col 3</td>
</tr>
</table>
Using Javascript or CSS, is there a way to change the background color of the whole first column (and not the row) whenever it is hovered upon?
I'm stumped on how to do this.
Posted by: Christian J Oct 10 2006, 07:06 AM
This should change the currently hovered cell in the first column, but not the whole column, and it doesn't work in IE.:
CODE
td:first-child:hover
{
color: #000;
background: pink;
}
With javascript you might do something like (assuming the table's ID is "foo"):
CODE
window.onload=function()
{
var foo=document.getElementById('foo');
var tr=foo.getElementsByTagName('tr');
for(var i=0; i<tr.length; i++)
{
var first_td=tr[i].getElementsByTagName('td')[0];
first_td.onmouseover=function()
{
hover('on');
}
first_td.onmouseout=function()
{
hover('off');
}
}
function hover(state)
{
for(var i=0; i<tr.length; i++)
{
var first_td=tr[i].getElementsByTagName('td')[0];
if(state=='on')
{
first_td.style.color='#000';
first_td.style.background='#fcc';
}
else if(state=='off')
{
first_td.style.color='#000';
first_td.style.background='#fff';
}
}
}
}