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.


--------------------
Please visit my home website: Dougmanic's! And please send me some comments!
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: 5,920
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: 24th July 2014 - 05:39 AM