css - 使用 CSS 在导航栏上滑动(动画)bg 图像位置

Question

我在本论坛的其他地方找到了这段代码，想知道如何使用导航栏获得相同的效果。

所以我会有 7 个文本链接，当您将鼠标悬停在一个链接上时，图像应该会滑到该文本位置。它需要在每个页面上处于不同的起始位置(在导航栏上突出显示当前页面)

这是 html:

<div class="box">
<a href"#">Home</a>
</div>

和CSS:

.rollover a {
    background: url(img/bg_nav_slide.png) no-repeat 0px 0px;
    width: 920px;
    height: 50px;
    display: block;
}
.rollover a:hover {
    background-position: 0px 40px 0px 0px;
}   
.box {
    background: url(img/bg_nav_slide.png) no-repeat;;
    border: 0;
    width: 920px;
    height: 50px;    
    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}
.box:hover {
    background-position: 40px 0;
}
.box p {
    text-indent: 2px;
}

Answer 1

这就是熔岩灯效应；您可以在这里找到纯 CSS 解决方案:

http://codepen.io/iamvdo/pen/GsIxk