Wie kann ich die Zeile und Spalte einer Tabelle hervorheben, wenn ich mit der Maus darüber fahre? ⇐ CSS

[Guest]

Ich möchte genau das Gleiche tun wie in diesem Beispiel: http://jsfiddle.net/ThinkingStiff/rUhCa/.

Wenn ich jedoch versuche, die Hintergrundfarbe der Tabelle zu ändern, funktionieren der Hover und die Hervorhebung nicht mehr.

Unten sehen Sie meinen Code:

HTML

Code: Select all

50kg
55kg
60kg


160cm
20
21
23

CSS

Code: Select all

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;
}