6

私は通常、CSS スプライトの作成に問題はありませんが、これは私を困惑させました...そして、それを解決する方法がわかりません. 基本的に、次のようなナビゲーション スプライトがあります。

nasdaq-ad-network-nav-sprit.png

<li>次のようなタグでそれらをレイアウトする標準的な規則を使用しています。

<li class="welcome"><a href="#" title="welcome">welcome</a></li>

次に、CSS を適用して背景の位置を調整します。

#navigation li.welcome a {
  width:155px;
  background-position:-0px -46.5px; }

もちろん、私はこれを考えていませんでしたが、問題はホバーで発生します。「正方形」の領域しか定義できないため、要素にカーソルを合わせると、「青色」のホバー状態が次のナビゲーション アイテムに引き継がれます。

次に、アイテムごとに個別の画像を作成する必要があると考えました...しかし、矢印セクションが重なっているため、それもうまく機能しません。

たぶん、「中間」の矢印セパレーターを分離する必要がありますか？よくわかりません。

私はここで困惑しています。何か案は？

4

4 に答える 4

5

すべての要件をカバーする「賢い」イメージを作り上げなければならないというあなたの意見は正しいと思います。

言葉で説明するのは難しいです。ここに例へのリンクがあります: http://www.alistapart.com/d/sprites/ala-blobs2.html

これがどのように行われるかへのリンクです（「不規則な形状」までスクロールします）：http://www.alistapart.com/articles/sprites

于 2010-08-20T13:33:11.507 に答える
2

「アクティブな」スプライトを 1 列にする代わりに、2 つ作成して交互にアクティブにします。

  active > inactive > active > inactive ...
  inactive > active > inactive > active ...

このようにして、いつでもスプライトをカットできます。要素のインデックスが「奇数」( ) の場合は、Y 値に追加するだけですindex & 1 == 1。

于 2010-08-20T13:24:55.777 に答える
2

ナビゲーションボタンが縦に積み重なるようにスプライトを作り直していただけませんか？次に、負の左マージンを使用してボタンを合わせることができるようです。このようにすると、ボタンの左側の負のスペースは、矢印の先端ではなく空になり、ホバーしてもキャビティは透明なままになります。

于 2010-08-20T13:50:20.617 に答える
0

スプライトを拡張し、ホバー状態をホバー状態の 5 つの個別の行に置き換えることができます。各行には、アイテムごとに個別のホバー状態位置を持つ単一の青いボタンしかありません。ファイル サイズが大きすぎてはいけません。

于 2010-08-20T13:28:36.143 に答える