The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Hover over columns to change color?
dougmanic
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 10 2006, 07:06 AM
Post #2


.
********

Group: WDG Moderators
Posts: 6,727
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';
            }
        }
    }

}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 2nd September 2015 - 09:50 AM