styling problem

October 2, 2012 8:32 AM

Why won't <colgroup> style properly?

I'm trying to style a <colgroup> on a table heading mouse-over but it doesn't work (FF 15).

Highlighting the <th> on mouse-over works:
th.description:hover {background-color: rgba(255,0,0,1)}

Highlighting the <colgroup> works:
colgroup#col1 {background-color: rgba(255,0,0,1)}

But putting them together doesn't work:
th.description:hover colgroup#col1 {background-color: rgba(255,0,0,1)}

Any ideas?

posted by urbanwhaleshark to Computers & Internet (3 answers total)

I'm not sure there is any way to make it work in pure css because the colgroup isn't within the th (or vice-vera) and colgroup:hover doesn't work. It can be done with javascript/jquery - that highlights rows and columns but it could be adapted to suit your purposes
posted by missmagenta at 8:46 AM on October 2, 2012

Could you please provide the actual html code?
posted by Foci for Analysis at 9:49 AM on October 2, 2012

Neither colgroup:hover {} or col:hover {} works, at least not in Chrome 22.0.1229.79 m. A possible pure CSS solution.
posted by Foci for Analysis at 10:06 AM on October 2, 2012