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.

score 3 · Accepted Answer · answered Apr 14 '10 at 15:29

3

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.

answered Apr 14 '10 at 15:29

graphicdivine

10,937
7
33
59

The order of `:link` and `:visited` doesn't matter (since they are mutually exclusive), but the order of `:link`+`:visited`, `:hover`, `:focus` and `:active` is significant. – Quentin Apr 14 '10 at 15:32

score 0 · Answer 2 · answered Apr 14 '10 at 15:27

0

Have you tried

table.main-calendar td:hover a

?

What does Firebug say?

answered Apr 14 '10 at 15:27

Pekka

442,112
142
972
1,088

1

td:hover would require additional Javascript. I'd look into jQuery -- it's VERY easy to do this. http://webdevel.blogspot.com/2006/10/jquery-tip-highlight-row-on-hover.html – Nathan Loding Apr 14 '10 at 15:29
Only if you are determined to achieve a cosmetic effect on IE6. Adding 16k of JS for that really isn't worth it. – Quentin Apr 14 '10 at 15:31
16k of javascript... loaded from MS or Google for free... and it's only loaded once... – Nitrodist Apr 14 '10 at 15:36
@sr pr, only once per cache, assuming your visitors have a copy of the file -visited a site that uses the same Google/whoever-hosted file- they won't have to download it at all. – David Thomas Apr 14 '10 at 16:08
sr pt, no, only once until they clear their cache. The formula might look like this for bandwidth downloaded for the client (16k + number of times visiting your web site * those pages). Like ricebowl mentioned, the js might already be loaded from another website (not your own) since many websites use MS's cache or Google's. The only downside for server is serving the extra JS linking code and the functions themselves. – Nitrodist Apr 14 '10 at 17:12

score 0 · Answer 3 · edited May 23 '17 at 12:13

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 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.

score 0 · Answer 4 · answered Apr 14 '10 at 16:09

0

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.

answered Apr 14 '10 at 16:09

kingjeffrey

14,894
6
42
47

want to change background of table td on hover

4 Answers4