0

私はデザインの学生で、Webデザインのコースを修了しています。私は最終的なサイトで作業していますが、スプライトに問題があります（1つのクラスで行ったものをフォローしましたが、今は理解できないようです）。クラス用に作成しているサイトにスプライトを使用するのは初めてです。とにかく、私はチュートリアルでいくつかのサイトを調べました、そして私はこれまで物事をうまく動かすことができました...ここに私のhtml（ナビゲーション用）があります：

  [ul id="list"]
    [li id="home"][a href="index.html"]home[/a][/li]
    [li id="profile"][a href="profile.html"]profile[/a][/li]
    [li id="work1"][a href="work-1.html"]1[/a][/li]
  [/ul]

CSSは次のとおりです。

nav  {
  display:block;
  position: absolute;
  right:0;
  top: 0;
  z-index:2;
}

list {
  background: url("../images/sprite-1.gif") no-repeat;
  list-style: none;
  width: 200px;
  height:250px;
  margin:0;
  padding:0;
}

list li, list a {
  display:block;
  height:25px;
}

home a:hover {
  display:block;
  height:25px;
  background-position:0px 75px;
}

コードの大まかな表示については申し訳ありません。これを正しく表示する方法がわかりません。私が物事を設定した方法の何が問題になっていますか？ここで、リンクは機能します。後でテキストリンクを非表示にすることを心配できます。ただし、リスト内の各アイテムにホバー画像を適用する方法がわかりません。

ありがとうございました、

マイケル

4

1 に答える 1

0

次のようなものが必要になります。

.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

この場合、cssnavはクラスIDです。

編集：質問に「css」タグを追加することもできます

于 2009-12-14T21:23:34.500 に答える