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

[Anonymous]

Я хотел бы сделать то же самое, что и в этом примере: http://jsfiddle.net/ThinkingStiff/rUhCa/.

Однако, когда я пытаюсь изменить цвет фона таблицы, наведение и выделение перестают работать.

Ниже вы можете увидеть мой код:

HTML



50kg
55kg
60kg


160cm
20
21
23




CSS

table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}

td, th, .row, .col {
cursor: pointer;
padding: 10px;
position: relative;
}

td:hover::before,
.row:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}

td:hover::after,
.col:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}


Подробнее здесь: https://stackoverflow.com/questions/542 ... ng-over-it