Plynulý hover efekt

HTML:

<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>

CSS:

.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;
}

Živá ukázka

Zdrojový kód

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.