1

トップレベルのアイテムのみを含む基本的なナビゲーションがあります。訪問中の現在のページに追加された特大の背景画像 (ナビゲーションは高さ 100 ピクセル、背景画像は高さ 200 ピクセル) があります。

 <ul>
  <li class="current-menu-item"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
 </ul>

jQuery MagicLineの動作をエミュレートできるようにしたいのですが、背景画像を使用して、ユーザーが他のナビゲーション リンクにマウスを合わせると、項目から項目へと移動するようにしたいと考えています。

これはjQueryで実行できますか? CSS3?

4

1 に答える 1

1

ここにソリューションを投稿しました：http://www.nextdesigns.ca/magicline/index.html

実際、それは恥ずかしいほど簡単です。最後に、CSS を少しいじるだけで済みました。

CSS のいくつかの項目を更新しました。説明したように、ここに静的幅を追加しました。

#example-one li { 
    display: inline-block;  
    width:100px; //NEW
}

次に、MagicLine の寸法と背景のプロパティを更新しました。

#magic-line { 
    position: absolute;
    bottom: -2px; 
    left: 0; 
    width: 100px; //NEW
    height: 50px; //NEW
    background: #fff url(bg.png); //NEW
    z-index:-1;
}

CSS の横に bg.png をポップしました。グレーがかった背景のシンプルな画像です。100px x 50px の任意の画像に置き換えることができます。役に立った場合は、回答としてマークしてください。

于 2013-08-18T00:41:51.527 に答える