Hover over columns to change color? |
Hover over columns to change color? |
dougmanic |
Oct 9 2006, 09:41 PM
Post
#1
|
Newbie Group: Members Posts: 19 Joined: 3-October 06 Member No.: 320 |
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. |
Christian J |
Oct 10 2006, 07:06 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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'; } } } } |
Lo-Fi Version | Time is now: 26th September 2024 - 09:57 PM |