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

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

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

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

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, кроме стандартного

14
задан Brian Tompsett - 汤莱恩 29 July 2017 в 11:25
поделиться