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="">Textodkazu</a> <a href="">Text odkazu</a> <a href="">Text odkazu</a> <a href="">Text dlouhého odkazu</a> <a href="">Odkaz je libovolně dlouhý</a> <a href="">Text odkazu</a> <span></span> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.menu { position: relative; overflow: hidden; background: #0D6AB7; width: 300px; } .menu a { display: block; text-align: center; padding: .5em .5em .7em .5em; text-decoration: none; color: #fff; z-index: 1; position: relative; } .menu span { box-sizing: border-box; position: absolute; background: #1081DD; border-left: 5px solid #8ECCF0; left: -100px; transition: .2s; z-index: 0; opacity: 0; } .menu:hover span { opacity: 1; } body { font-family: Segoe UI, Arial; }
CSS
Autoformát
CSS reset
Až na konci
var odkazy = document.querySelectorAll(".menu a"); var zvyraznovac = document.querySelector(".menu span"); for (var i = 0; i < odkazy.length; i++) { odkazy[i].onmouseover = function() { zvyraznovac.style.left = this.offsetLeft + "px"; zvyraznovac.style.top = this.offsetTop + "px"; zvyraznovac.style.width = this.offsetWidth + "px"; zvyraznovac.style.height = this.offsetHeight + "px"; } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>