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
<div class=karta onclick="choose(this)"></div> <div class=karta onclick="choose(this)"></div> <div class=karta onclick="choose(this)"></div> <div class=karta onclick="choose(this)"></div> <div class=karta onclick="choose(this)"></div> <button onClick="send()">Odeslat!</button>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.karta {height:200px; width:130px; background:red;display:inline-block; position:relative;top:0px;transition:0.3s top ease-out;} .karta:hover {top:-20px;transition:0.3s top ease-out} body {padding-top:50px;} .karta.choosed {top:100px;}
CSS
Autoformát
CSS reset
Až na konci
function choose(card) { if(card.className=='karta') { if(document.querySelectorAll(".karta.choosed").length>=3)return; card.className='karta choosed'; } else card.className='karta'; } function send() { //to ještě nevím :) }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>