Почему наведение строки CSS остается в таблице с чередующимися строками (в IE)?

У меня есть таблица со строками, имеющими чередующиеся цвета. Также есть эффект наведения на строки таблицы. В IE10 под Windows 8 (и в IE9-режиме тоже) наведение часто остается даже после того, как мышь убрана.

Вот демо (просто перетащите указатель сверху вниз по таблице): http://jsfiddle.net/rapik/UF8kZ/

Удаление правил, из-за которых цвета строк чередуются, решает проблему.

Это баг или я что-то не так делаю?

Источник CSS:

/*
 * Alternating colors for rows.
 */
.table tbody tr:nth-child(odd) {
  background-color: #DDDDDD;
}

.table tbody tr:nth-child(even) {
  background-color: #EEEEEE;
}

/*
 * Hover effect for rows.
 */
.table tbody tr:hover {
  background-color: red;
}

html css internet-explorer internet-explorer-10
person Andrej    schedule 04.01.2013    source источник
comment
У меня отлично работает: IE10 на Win7 64bit.   -  person robertc    schedule 04.01.2013
comment
В IE9 тоже работает нормально. Я тоже ни разу не слышал, чтобы у кого-то была такая проблема.   -  person Sven Bieder    schedule 04.01.2013
comment
Спасибо за ответы. У меня Windows 8 и IE 10.0.9200.164666, возможно это связано с ОС...   -  person Andrej    schedule 04.01.2013

Ответы (2)


arrow_upward
2
arrow_downward

Вы столкнулись с довольно интересной проблемой. Немедленное решение — сместить фокус с элемента tr на его дочерние элементы td:

.table tbody tr:nth-child(odd) {
    background-color: #DDDDDD;
}
.table tbody tr:nth-child(even) {
    background-color: #EEEEEE;
}
.table tbody tr:hover td {
    background-color: blue;
}

Это решило проблему, но может быть недостаточно для всех случаев. Я продолжу экспериментировать с этим и посмотрю, смогу ли я уточнить более конкретные детали.

Обновление:

Так что я подозреваю, что это может иметь какое-то отношение к элементам, которые имеют display: table-row. Мне удалось создать элемент span, применить соответствующие правила display и воспроизвести ту же проблему.

Дальнейшие эксперименты: http://jsbin.com/asazah/2

person Sampson    schedule 04.01.2013
comment
Спасибо за решение! Я вижу проблему и на вашем примере. Думаю, это баг... Вы заметили, что иногда при достаточно быстром перемещении курсора ховер сбрасывается даже с элемента с display:table-row? - person Andrej; 05.01.2013
comment
@Andrej Я этого не заметил - спасибо, что указали на это. - person Sampson; 05.01.2013

arrow_upward
2
arrow_downward

У меня тоже была похожая проблема: IE10 неправильно отображал tr:hover при динамическом создании html (но IE10, похоже, правильно работал со статически определенным html).

    div.MenuPanel table tr.MenuOption:hover {
        background-color: rgb(245,245,245); 
    }

 /* work around to get correct display in IE10 */
    div.MenuPanel table tr.MenuOption:hover td {
        background-color: rgb(245,245,245); 
    }

Приведенный выше обходной путь (добавление второго объявления с помощью td) устранил проблему!! Похоже на ошибку в IE10. Без второго объявления иногда строка подсвечивается, а иногда нет (т. е. постоянно случайно прерывисто).

person Robert D    schedule 01.05.2013