CODEWITHSUNDEEP
htmlcss
Brad
Brad

Reputation: 12262

want to change background of table td on hover

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.

Upvotes: 0

Views: 1593

Answers (4)

kingjeffrey
kingjeffrey

Reputation: 15270

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.

Upvotes: 0

Bruce
Bruce

Reputation: 1

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.

Upvotes: 0

graphicdivine
graphicdivine

Reputation: 11211

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.

Upvotes: 3

Pekka
Pekka

Reputation: 449415

Have you tried

table.main-calendar td:hover a

?

What does Firebug say?

Upvotes: 0

Related Questions