column highlights with css

[freelance84]

.added_names_row{
background-color: #FFFFFF;	
}
.added_names_row:hover{
background-color: #CCFFF4;
}

 

When the above is applied to a <tr> tag, the background of the said row when you hover over with your mouse changes colour.

 

Is it possible to do the same with a column with just css?

 

ie... i want the user to be able to see their column title and row highlighted when hovering over a certain point

[freelance84]

 

 

http://www.search-this.com/2007/04/11/styling-table-columns-with-css/

[freelance84]

I've just applied a class to the col groups in question, but the :hover isn't working:

 

CSS:

 

.added_name_col{}.added_name_col:hover{background-color: #CCFFF4;}

 

 

HMTL:

 

<colgroup>                <col/>                <col/>                <col class="added_name_col" />                <col class="added_name_col" />                <col/></colgroup>

 

 

 

Any idea how i can get this going?

 

 

[haku]

I don't think this is something that can be done very easily. I'm pretty sure that the col element doesn't put out an event for :hover (or mouseover in javascript), which means that you cannot do it directly.

 

The only way I can think of to do this would be to set a common class name for every td tag in a column. then using javascript, use onmouseover and get the class name, then set the background color for that class. That will get all the rest of the td tags in the column. You will also need to revert the background color onmouseout.

[haku]

I actually just put together a little tutorial on the matter:

 

http://www.jaypan.com/blog/highlighting-html-columns-jquery-and-css

 

 

[freelance84]

http://www.soulbeams.net/webtech/css/remoterollover/

 

This is pretty advanced CSS to what i'm used to.... but could i apply one of these techniques to a table column?

[freelance84]

PS

I'm only using Javascript when it is the only option available to me. If I can work around this with only using CSS i would much prefer.

[haku]

It cannot be done with CSS. Read the intro in my tutorial - it explains why.

[haku]

http://www.soulbeams.net/webtech/css/remoterollover/

 

This is pretty advanced CSS to what i'm used to.... but could i apply one of these techniques to a table column?

 

No. The technique they are showing there relates to (and requires) parent <-> children relationships, but there is no parent <-> child grouping of columns in an HTML table, only rows.

[freelance84]

hmm.

 

Well, I'll be using the javascript version then i reckon.

 

Thanks