How can I change the background column of an html table column when the mouse is over it?
Preferably with css only.
+1
A:
I do not think there is a clean HTML + CSS way to do this. Javascript is an alternative, for example the jQuery tableHover plugin
wiifm
2009-10-12 09:32:30
+2
A:
Only works for cells or rows, sorry. e.g.
td {
background-color: blue;
}
td:hover {
background-color: red;
}
There are JavaScript solutions available but nothing in CSS right now will do what you want because of the limitations of selectors.
td /* all cells */
{
background-color: blue;
}
tr /* all rows */
{
background-color: pink;
}
/* nothing for all columns */
Jonathan Fingland
2009-10-12 09:32:41
Actually you can style columns using either the sibling selector (gets a little messy) or CSS3's `nth-child` (no IE support). You still can't do it on hover though, because you're only ever hovering on a cell or row, not a column.
DisgruntledGoat
2009-10-12 16:10:22
A:
You can try experimenting with <col> tag and col:hover { background: red; } style, but I doubt that it will work. Anyway, this definitely won't work in older versions of MSIE, so you will need javascript in order to do this.
n1313
2009-10-12 09:32:56
`col:hover` doesn't seem to work in firefox 3.5, though `col { background-color:blue; }` does
Jonathan Fingland
2009-10-12 10:03:43
A:
I had a similar problem where I had too many columns to display on screen. VIA PHP, I turned each row into a 1 x column table. So, n rows = n tables. I then nested each table within a master table. Doing so allowed me to call td:hover from my stylesheet. Since each td held a table, it has the same effect of highlighting the a column when I mouse over it.