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 pouze v CSS</title> <h1>Zvýraznění tabulky při <code>:hover</code>u pouze v CSS</h1> <table> <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; position: relative; } tr:hover, col.hover { background: yellow; } table { border-collapse: collapse; overflow: hidden; } td:before { display: none; content: ""; left: 0; top: -500px; position: absolute; width: 100%; height: 1000px; background: yellow; z-index: -1; } td:hover:before { display: block; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>