1

ロールオーバー画像/リンクのテーブルがあります。これにはスプライトを使用したいと思っていましたが、何らかの理由でコードがライブになると、画像表示の約半分しか表示されません。

誰かが実際に見たい場合は、私のコードはここにあります: http://www.geckosourcing.co.uk/ebay/Promotions/Cross_Promotion.html http://www.geckosourcing.co.uk/ebay/Promotions/ Cross_Promotion.css

HTML:

<td height="88" width="88"><a class="1000AQwpanel" href="http://goo.gl/mOu8L">1000 Wetroom Panel</a></td>

CSS:

.1000AQwpanel {
    display: block;
    width: 88px;
    height: 88px;
    background: url('http://www.geckosourcing.co.uk/ebay/Promotions/Promotion_Sprite.jpg') -704px 880px;
    text-indent: -99999px;
}
.1000AQwpanel:hover {
    background-position: -704px 792px;
}

このコードは機能するセクションと同じように見えるので、私はそれを理解しています。誰かが私がどこで間違っているかを示すことができれば、髪を引っ張るのを防ぐことができます.

ありがとう

4

2 に答える 2

4

これは、数字で始まるクラス名が原因であると思われます。

class="760Corner"

有効なクラス名は、文字、アンダースコア、またはハイフンで始まる必要があります。

于 2013-01-17T14:20:46.127 に答える
1

class / id の名前は数字で始まることはできません。Html はコードを有効にします。問題を引き起こすのは css です。

これを回避するには、別のスタイルの css を使用できます。

CSS

a[class="760corner"]{

}

PS。

画像内にテキストがあるのはなぜですか？このようにスパンにテキストを入れてみてください

HTML

<a class="corner-760">
    <span>Your text</span>
</a>

CSS

a {
    display: block;
    position: relative;
    background: url('../images/.....jpg');
    width: 80px;
    height: 80px;
}

a > span {
    display: block;
    text-align: center;
    height: 100%;
}


a:hover > span {
    display: none;
}

a.corner-760 {
    background-position: ........;
}
于 2013-01-17T14:42:38.853 に答える