getting columns to change color on hover

Rahul · Jul 22, 2009

Is there a way to get a column to change emphasis color using css? I could
successfully do this for rows but it does not seem to work for columns.

table col:hover{
background: #d0dafd;
color: #339;
}

Jonathan N. Little · Jul 22, 2009

Rahul said:
Is there a way to get a column to change emphasis color using css? I could
successfully do this for rows but it does not seem to work for columns.

table col:hover{
background: #d0dafd;
color: #339;
}

No, because TDs are not descendants of COL elements in DOM. What you
wish requires JavaScript.

dorayme · Jul 23, 2009

"Jonathan N. Little said:
No, because TDs are not descendants of COL elements in DOM. What you
wish requires JavaScript.

I think you are right.

Mind you, OP can get a col to change colour by hovering on a table
without js, but this is not quite what he wants.

Rahul · Jul 23, 2009

Mind you, OP can get a col to change colour by hovering on a table
without js, but this is not quite what he wants.

Actually, that was what I was thinking about. Maybe my spec wasn't clear or
the finer distinctions of html are lost on me!

Again,

I can get a row to change color when I hover. Now if I could get a column
to do that too it would be neat. Sort of the crosshair effect so that both
the horizontal and vertical associations are clear.

From what "dorayme" writes is that possible in html? Or is javascript my
only option?

Jonathan N. Little · Jul 23, 2009

Rahul said:
Actually, that was what I was thinking about. Maybe my spec wasn't clear or
the finer distinctions of html are lost on me!

Again,

I can get a row to change color when I hover. Now if I could get a column
to do that too it would be neat. Sort of the crosshair effect so that both
the horizontal and vertical associations are clear.

From what "dorayme" writes is that possible in html? Or is javascript my
only option?

No, as I said it would require JavaScript. COL is one of those oddball
legacy "presentational" elements. It does not reveal itself in the DOM
so CSS will not work on it. Use Web Developer's bar or some DOM
inspector and your will see for yourself

<html>
<body>

<table width="100%" border="1">
<col align="left"></col>
<col align="left"></col>
<col align="right"></col>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>

</body>
</html>

COL will be a child of TABLE but *not* a child of TBODY where all the
TDs are that you want to change background.

TABLE > COL

TABLE > TBODY > TR > TD

dorayme · Jul 23, 2009

"Jonathan N. Little said:
No, as I said it would require JavaScript.

OP can get a col to change colour by hovering on a table
without js, but this is not quite what he wants, he wants to be able to
hover on the col itself.

Rahul · Jul 24, 2009

No, as I said it would require JavaScript. COL is one of those oddball
legacy "presentational" elements. It does not reveal itself in the DOM
so CSS will not work on it. Use Web Developer's bar or some DOM
inspector and your will see for yourself

Thanks Jonathan! THe "Developers Toolbar" is awesome! I had no idea this
existed. It makes examining how stuff works so easy.

Thanks again!

Jonathan N. Little · Jul 24, 2009

Rahul said:
Thanks Jonathan! THe "Developers Toolbar" is awesome! I had no idea this
existed. It makes examining how stuff works so easy.

Great tool, not if Chris would just get it updated for Firefox 3.5.x

Color for hover over	1	Jul 30, 2022
JQuery hover error	3	Aug 28, 2023
Replace hover effect by active and focus	1	Aug 23, 2024
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast	1	Feb 1, 2023
How to change background color to fit shape	1	Feb 11, 2023
Change href color on hover?	3	May 2, 2011
Difficulties with the addition of an accordion	0	Feb 6, 2024

getting columns to change color on hover

Rahul

Jonathan N. Little

dorayme

Rahul

Jonathan N. Little

dorayme

Rahul

Jonathan N. Little

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads