want to change background of table td on hover

Question

I have a webpage that displays a calendar, and I want to change the background-color of any td that has their day number linked, so when I hover over that day, it changes the background-color.

I thought this would work:

.main-calendar td {
    width:14%;
    height:100px;
    text-align:center;
    border:1px solid #000;
    font-size:20px;
    vertical-align:middle;
    display:block;
}

table.main-calendar td a:hover,
table.main-calendar td a:visited {
    display:block;
    text-decoration:none;
    background-color:red;
    color:#fff;
}

table.main-calendar td a:link {
    display:block;
    text-decoration:none;
    background-color:green;
    color:#fff;
}

Any help is appreciated.

Answer 1

Have you tried

table.main-calendar td:hover a

?

What does Firebug say?

Answer 2

looks to me like you should just change the order of the last two rules. All other things being equal, you should declare :link before :hover and :visited, otherwise it gets over-ruled by the cascade.

Answer 3

Your code will only set the background colour of the link, not of the whole table cell, because the CSS matches the <a> elements (not their <td> parents). In general there's no way in CSS to select an element based on it's children (see http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child), so you although you can (assuming you don't care about IE6) write a rule for

table.main-calendar td:hover

and have it highlight the cell when you hover over it, you can't work out whether or not this cell contains a link (visited or otherwise).

So you'll need to go for an alternative approach, either making the link take up the entire table cell (if there's only one link per cell) or using some sort of JavaScript.

Answer 4

Note that in IE6, the hover property is only recognized on anchor tags. So be careful using hover on non-anchors to communicate essential information. If it is non-essential, go ahead and apply hover to the td.