3

これらのスプライトボタンは私をばかげています。私はそれらをほとんど機能させることができますが、完全ではありません。

私はこの非常に単純なスプライト画像で遊んでいます：

jp2Rolloverスプライト

jsfiddleプロジェクトがあります>>ここ<<見たい場合はここにありますが、見たいだけの場合はコードを以下に示します。

私のCSSには、次のものがあります。

#menu {
  left:10px;
  top:50px;
  height:300px;
  width: 147px;
  position:fixed;
}
.sprite {
  background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat;
  height:50px;
  padding-left: 50px;
  width:147px;
  z-index:1;
}
.sprite a {
  background-position: 0px 0px;
  color:Red;
  vertical-align: middle;
}
.sprite a:hover {
  background-position: 0px -50px;
  color:Yellow;
}
​

それで、私のHTMLはシンプルで小さいです：

<html>
<body>
  <ul id="menu">
    <li class="sprite">You Are Here</li>
    <li class="sprite"><a href="#A">Contact</li>
    <li class="sprite"><a href="#B">Projects</li>
  </ul>
</body>
</html>​

アクティブなリンク画像（位置0）またはホバーリンク画像（位置50）を表示できないようです。

また、長方形の領域全体（50 x 147）をハイパーリンクにする方法を見つけたいと思います。

誰か助けてくれませんか？

4

6 に答える 6

2

私はあなたのフィドルを更新しました：http：//jsfiddle.net/PZh9F/12/

ulの背景を設定したので（必要に応じて）ul、ホバー時にこれと同じバックグラウンドの位置を変更する必要がありaます。テキストの色を変更する必要がありa:hoverますが、これが正しい方向を示していることを願っています。

于 2012-08-08T21:25:39.833 に答える
2

それはあなたが取得したいものですか：http：//jsfiddle.net/PZh9F/37/？

CSS：

#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px 0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hover a { color:Yellow; }

およびHTML：</ p> 

<html>
<body>
  <ul id="menu">
    <li class="sprite current">You Are Here</li>
    <li class="sprite"><a href="#A">Contact</li>
    <li class="sprite"><a href="#B">Projects</li>
  </ul>
</body>
</html>​
于 2012-08-08T21:26:38.727 に答える
1

同じタグのセットに両方を適用するのではなく、タグとタグに適用backgroundしています。<li>background-position<a>

于 2012-08-08T21:25:11.683 に答える
1

ハイパーリンクではなく、li.spriteの背景を定義しました。そのため、a：hoverが発生すると、-50px下に移動する背景がありません。

.sprite a {
   background-image: url('http://www.jp2code.net/logos/jp2Rollover.png');
   background-position: 0px -100px;
   color:Red;
   vertical-align: middle;
   display:block;
   width:147px;
   height:50px;
  }
.sprite a:hover {

   background-position: 0px -50px;

  }
于 2012-08-08T21:25:31.603 に答える
1

y軸による背景位置は、-50pxと-100pxの負の値である必要があります。

于 2012-08-08T21:25:48.717 に答える
1

ほんの少しの問題：

アンカータグが閉じていなかったため、問題が発生した可能性があります。

リンクのように動作させたい場合は、アンカータグを使用する必要があります。最初のliタグが単なるテキストであることに気づきました。技術的には、同じ効果を得ることができますが、何かにリンクしようとしていると思います。

背景画像を使用しているボタン内のリンクにHTMLテキストを使用している場合は、フォーマットしやすいようにテキストをスパンに配置することをお勧めします。スパンを使用せずにアンカータグにパディングを追加すると、一部のブラウザでは、幅が設定されていても、反対側に余分なパディングが発生する可能性があります。私が何年にもわたって学んだほんの少しのトリック。

スプライトを使用する場合は、必ず高さ、幅、display：blockプロパティを「a」セレクターに追加してください。これにより、リンク全体がクリック可能になります。

ホバーの一部がジャンプしているようです。スプライトに問題がある可能性があります。測定値が正確であることが重要です。1pxずれている場合でも、望ましくないちらつき効果が発生する可能性があります。

完全なコードはここにあります：http： //jsfiddle.net/PZh9F/65/

お役に立てば幸いです。

于 2012-08-08T21:59:26.970 に答える