хочу изменить фон таблицы тд при наведении

Question

У меня есть веб-страница, на которой отображается календарь, и я хочу изменить цвет фона любого тд, к которому привязан их номер дня, поэтому при наведении курсора на этот день цвет фона меняется.

Я думал, что это будет работать:

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

Любая помощь приветствуется.

Answer 1

выглядит так, как будто вы должны просто изменить порядок двух последних правил. При прочих равных условиях вы должны объявить: link before: hover и: visit, в противном случае он будет перекрыт каскадом.

Answer 2

Обратите внимание, что в IE6 свойство hover распознается только для тегов привязки. Так что будьте осторожны, используя hover на не-якорях для передачи важной информации. Если это несущественно, продолжайте и примените hover к тд.

Answer 3

Ваш код будет устанавливать только цвет фона ссылки, а не всей ячейки таблицы, поскольку CSS соответствует элементам (а не их родителям). В общем, в CSS нет способа выбрать элемент, основанный на его дочерних элементах (см. Сложный селектор CSS для родителя активного дочернего элемента ), так что вы можете (если вы не заботитесь о IE6) написать правило для

table.main-calendar td:hover

и когда она будет подсвечиваться над ней, вы не сможете определить, содержит ли эта ячейка ссылку (посещенную или нет).

Таким образом, вам нужно использовать альтернативный подход: либо ссылка должна занимать всю ячейку таблицы (если в ячейке только одна ссылка), либо использовать какой-то JavaScript.

Answer 4

Вы пробовали

table.main-calendar td:hover a

Что говорит Firebug?