2

css で画像のロールオーバーを処理するスクリプトがあります。これが CSS ロールオーバーを行う適切な方法であるかどうか知りたいことは何ですか? また、これが良いかどうか知りたかったのですが、他のロールオーバー画像をどのように処理しますか?画像ごとに個別の css を用意する必要がありますか?

例を次に示します: http://jsfiddle.net/GFec3/40/

CSS コード: 

a.rollover {
   display: block;
   width: 27px;
   height: 25px;
   text-decoration: none;
   background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
}

a.rollover:hover {
   background-position: -350px 0;
}

.displace {
   position: absolute;
   left: -5000px;
}

HTML

 <a href="#" class="rollover" title="Webvamp" width="54" height="25"><span class="displace">TEST</span></a>

これは機能しますが、複数のロールオーバー画像を処理する特別な方法はありますか?

4

3 に答える 3

4

CSS で背景画像を使用する必要はありません。例：

<STYLE type="text/css">
.roll .on { display: none; }
.roll .off { display: block; }
.roll:hover .on { display: block; }
.roll:hover .off { display: none; }
</STYLE>
<DIV class="roll">
  <IMG class="on" src="...">
  <IMG class="off" src="...">
</DIV>

これを行う方法はたくさんあります。どちらを選ぶかはあなた次第です。

于 2012-08-24T07:03:52.720 に答える
2

CSS スプライトを使用します。これを使用すると、背景画像を 1 つだけ使用できます。異なる画像ホバーの背景位置を変更するだけです。

CSS スプライト: イメージ スライスのキス オブ デス

于 2012-08-24T07:05:44.530 に答える
1

現在使用している方法が最も効率的です。とりわけ、ロールオーバー イメージは非ロールオーバー イメージと同じであるため、その部分が異なるだけで「プリロード」されます。また、HTTP 要求の数を最小限 (dataスキームを除く) に減らし、場合によっては実際にファイルサイズを改善します (最良のケースは、同様のカラー パレットを使用する 2 つの画像で、2 つではなく 1 つのカラー テーブルが必要です)。

それを変更しないでください、それは完璧です。

ロールオーバーごとに個別の CSS を定義する必要がありますが、画像が同じサイズの場合は、:hover定義を再利用することでダメージを軽減できます。

于 2012-08-24T07:08:14.570 に答える