Контур строки таблицы при наведении

Я пытаюсь выделить границу строки таблицы при наведении. К сожалению, это работает только для первой строки ячеек. Нижние ряды имеют одну границу, не меняющую цвет. Я пытался использовать outline, но он не работает с :hover в webkit.

http://jsfiddle.net/S9pkM/2/

Представьте себе стандартную таблицу html. Некоторые tr's с некоторыми td's. При наведении курсора на строку ее граница должна быть выделена красным цветом.

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 3px solid black; }
table tr:hover td { border-top-color: red; border-bottom-color: red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }

Я открыт для альтернативных подходов, но я застрял в структуре таблицы. Нет вставки дополнительного html, кроме стандартного <table> <tr> <td>


colors html css border css-tables
person mrtsherman    schedule 14.11.2011    source источник
comment
Думаю, это не из-за :hover. Так ведет себя таблица.   -  person maxisam    schedule 15.11.2011

Ответы (4)


arrow_upward
21
arrow_downward

Я столкнулся с той же проблемой и, наконец, нашел более простое решение здесь.

Вы можете использовать этот прием CSS ( border-style: double; ), который работает для границ в 1 пиксель:

#mytable tr.row:hover td
{
    border-style: double;
    border-color: red;
}

Это заставит ваш border-color работать (будет самым лучшим), несмотря ни на что. :-)

person Leniel Maccaferri    schedule 05.02.2013
comment
Ладно, это намного проще. Я не вижу визуальной разницы между двойным и сплошным. jsfiddle.net/emeGe - person mrtsherman; 05.02.2013
comment
Хм! Это потому, что double создает какой-то новый контекст порядка наложения? Или это что-то гораздо более зловещее? - person Jacob Ford; 10.12.2016
comment
любое предложение для пунктирного стиля границы? - person Halt; 16.02.2017
comment
Это работает достаточно хорошо, за исключением того, что и FF, и Chrome, похоже, имеют ошибки рендеринга, которые иногда оставляют цвет рамки на некоторых границах после окончания наведения. Чаще всего встречается в последней строке и последнем столбце таблицы. Никогда не удавалось обойти ошибки рендеринга. - person SimonAlfie; 22.02.2017
comment
Мне пришлось изменить селектор на #mytable tr:hover td, чтобы он заработал, в остальном очень здорово! - person Wubbler; 07.11.2018

arrow_upward
6
arrow_downward

Для границ в 1 пиксель см. решение Лениэля, в котором используется border-style: double. Это намного проще. Двойная рамка — это та, которая показывает линию толщиной 1 пиксель для внутреннего и внешнего краев границы. Это ничего не делает для границы в 1 пиксель, но на> 1 пиксель есть зазор.

Для границ> 1px вы удаляете нижнюю границу для всех <td> с border-bottom: 0. Верхние границы других ячеек сохранят все, как должны, за исключением последней строки. Последний ряд закрепляем с помощью tr:last-child td { border-bottom: your border style }. Наконец, в псевдоклассе наведения вы устанавливаете нижнюю границу.

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }
person mrtsherman    schedule 16.11.2011

arrow_upward
0
arrow_downward

почему бы не использовать отдельную границу? http://jsfiddle.net/S9pkM/6/

person bravedick    schedule 14.11.2011
comment
Потому что я использую границы 1px. Вот почему я сказал: I am aware of separate. Мне также не нравится, как разноцветные рамки накладываются друг на друга. - person mrtsherman; 15.11.2011

arrow_upward
0
arrow_downward

Просто поместите этот код в раздел head:

<style>
  table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;}
  table td:hover {border:2px solid red; }
</style>
person ravi    schedule 21.10.2012
comment
Это не работает. Обратите внимание, что граница отсутствует при наведении. jsfiddle.net/S9pkM/90 - person mrtsherman; 22.10.2012