2

それぞれに画像テキストとホバー状態のボタンが10個あります。私がやりたいのは、background-position、width、height を使用して背景画像のスプライトの一部のみを表示し、hover background-position を使用してホバー スタイルを表示することです。また、要素に画像置換クラスを使用して、アクセス可能でインデックス可能な状態を維持できるようにします。

だから（測定はランダムです）：

[CSS]

.menu{background-image:url(path/to/sprite.png);}
.button-1{width:200px;height:30px;background-position:0 0;}
.button-1:hover{background-position:0 -30px;}
.button-2{width:250px;height:30px;background-position:100px 0;}
.button-2:hover{background-position:100px -30px;}
/* Image Replacement Class (H5BP, @necolas && BEM) */
.ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent;}

[HTML]

<a href="someLink.html" class="menu button-1 ir">Button 1</a>
<a href="someOtherLink.html" class="menu button-2 ir">Button 2</a>

私が知りたいのは、それがこれを行う良い方法なのか、それとも別の方法で行うべきなのかということです:

<a href="someLink.html"><img src="image.png" width="200" height="30" alt="Button 1"/></a>

次に、ホバー時に JavaScript で画像を入れ替えます。

アクセシビリティとロボットに関して、この 2 つに違いはありますか?

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

4

1 に答える 1

2

あなたがしていることは正しいです。display: block;そのリンクにを追加することを忘れないでください。他にできることは、実際のリンク テキストをスパンに配置し、そのスパンを画面の外に絶対的に配置することです。そのようです：

<a href="" title="Test link"><span>Home page</span></a>

そしてあなたのcssファイルで：

a > span {position: absolute; top: -10000px;}
于 2012-03-26T14:51:45.047 に答える