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>Plynule se posouvající :hover efekt</title> <h1>Plynule se posouvající <code>:hover</code> efekt</h1> <div class="menu"> <a href="">Text odkazu</a> <a href="">Text odkazu</a> <a href="">Text odkazu</a> <a href="">Text odkazu</a> <a href="">Text odkazu</a> <a href="">Text odkazu</a> <span></span> </div>
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: #1081DD; border-bottom: 5px solid #8ECCF0; 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>