3

このフォーラムの他の場所でこのビットのコードを見つけたので、ナビゲーション バーで同じ効果を得る方法を知りたいです。

したがって、7 つのテキスト リンクがあり、1 つにマウスを合わせると、画像がそのテキストにスライドするはずです。各ページの異なる開始位置にある必要があります (ナビゲーション バーの現在のページを強調表示します)。

これは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;
}
4

1 に答える 1

1

それがラバランプ効果です。ここで純粋な CSS ソリューションを見つけることができます。

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

于 2012-11-18T18:08:31.333 に答える