css hover на строке таблицы не работает

Я пытаюсь добиться эффекта наведения на строку таблицы, и у меня есть следующий код на моем css.css hover на строке таблицы не работает

.datatable tr.row:hover, .datatable tr.altrow:hover { 
    color: #000; 
    background-color: #FFFACD; 
    background-image: url(../Images/bullet.gif); 
    background-repeat: no-repeat; 
}

Но я не вижу, чтобы это применялось вообще. Мои вопросы:

Почему это не работает?
Как исправить это?

Для ясности здесь скрипка http://jsfiddle.net/naveen/UPhRE/
Пожалуйста, не возражаете изображения внутри CSS. Там все хорошо.

источник

2011-08-05 naveen

Вы устанавливаете фон в отдельных ячейках таблицы (td), который отображается поверх tr.

Если у вас есть два варианта:

1) переместить все строки фона стиль в tr с.

2) Обновление CSS, чтобы выглядеть следующим образом:

.datatable tr.row:hover td, .datatable tr.altrow:hover td { 
    color: #000; 
    background-color: #FFFACD; 
    background-image: url(../Images/bullet.gif); 
    background-repeat: no-repeat; 
}

Это сделает цвет на ряду: http://jsfiddle.net/R9YGw/3/

Update: включено обновление для изображения только на первой ячейке:

.datatable tr.row:hover td, .datatable tr.altrow:hover td { 
    color: #000; 
    background-color: #FFFACD; 
} 
.datatable tr.row:hover td:first-child, .datatable tr.altrow:hover td:first-child { 
    background-image: url(../Images/bullet.gif); 
    background-repeat: no-repeat; 
}

источник

2011-08-05 06:56:56 OverZealous

+1: спасибо за объяснение. да, зависание работает, но ваша скрипка просто потеряла приказ. – naveen

также проблема со вторым подходом заключается в том, что я хочу, чтобы изображение приходилось только в верхнем левом углу первого tds. – naveen

К сожалению, я отправил неправильную версию, попробуйте сейчас! – OverZealous

Проблема заключается в том, что вы устанавливаете цвет фона на элементах td, w которые далее идут вниз по дереву DOM, и, следовательно, цвет их имеет приоритет.

Если применить цвет только строки вы увидите парения появляясь:

.datatable .row 
{ 
    background-color: #FFFFFF; 
} 
.datatable .altrow 
{ 
    background-color: #EDF5FF; 
}

источник

2011-08-05 06:57:17

+1: спасибо Stephen, я сделал это точно. – naveen

Вы можете навести его, на самом деле, но это не будет работать отлично в старых IE. Ваша проблема заключается в том, что ваш начальный (не зависающий) цвет присваивается элементам TD, а не TR. Измените свой CSS так, чтобы он сделал это:

.datatable tr.row:hover, .datatable tr.altrow:hover 
.datatable tr.row:hover td, .datatable tr.altrow:hover td 
{ 
    color: #000; 
    background-color: #FFFACD; 
    background-image: url(../Images/bullet.gif); 
    background-repeat: no-repeat; 
}

И все в порядке. Не знаете, как часть изображения будет выглядеть в каждом TD, так что вам может понадобиться сделать больше настроек для этой части.

источник

2011-08-05 06:59:18

+1 спасибо. Я хочу только изображение на первом td и, следовательно, проблема. – naveen

http://jsfiddle.net/BradleyStaples/TYjhA/1/ - Работа с изображением только на первой TD-ячейке. –

css hover на строке таблицы не работает

ответ

Смежные вопросы