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="menu"> <a href="">První</a> <a href="">Druhý</a> <a href="">Třetí</a> <a href="">Čtvrtý</a> <a href="">Pátý</a> <a href="">Šestý</a> <span></span> </div> <br> Vytvořeno pro <b><a href="http://mujskript.cz/css/19-plynuly-hover-efekt">Plynulý hover efekt - MůjSkript.cz</a></b> za pomoci <i>Str4wberryho</i>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.menu { position: relative; overflow: hidden; background: #0D6AB7; } .menu a { float: left; width: 100px; text-align: center; padding: .5em 0 .7em 0; text-decoration: none; color: #fff; z-index: 1; position: relative; } .menu span { position: absolute; height: 100%; background: red; border-bottom: 5px solid yellow; width: 100px; bottom: 0; left: -100px; transition: left .2s; } .menu a:nth-child(1):hover ~ span {left: 0} .menu a:nth-child(2):hover ~ span {left: 100px} .menu a:nth-child(3):hover ~ span {left: 200px} .menu a:nth-child(4):hover ~ span {left: 300px} .menu a:nth-child(5):hover ~ span {left: 400px} .menu a:nth-child(6):hover ~ span {left: 500px} body { font-family: Segoe UI, Arial; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>