Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Zvýraznění tabulky při :hoveru JavaScriptem + CSS selektory</title> <h1>Zvýraznění tabulky při :hoveru JavaScriptem + CSS selektory</h1> <table id="tabulka" onmousemove="zvyraznit(event)" onmouseout="this.className = ''"> <tr> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> </tr> <tr> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> </tr> <tr> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> </tr> <tr> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> </tr> </table>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
td { padding: .5em; } tr:hover, col.hover { background: yellow; } table { border-collapse: collapse; } .sloupec-1 td:nth-child(1), .sloupec-2 td:nth-child(2), .sloupec-3 td:nth-child(3), .sloupec-4 td:nth-child(4), .sloupec-5 td:nth-child(5) { background: yellow; }
CSS
Autoformát
CSS reset
Až na konci
var tabulka = document.getElementById('tabulka'); function zvyraznit(e) { e = e || window.event; var bunka = (e.target || e.srcElement); if (bunka.tagName == "TD") { tabulka.className = "sloupec-" + (bunka.cellIndex + 1); } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>