CSS を少し圧縮しようとしていますが、これで問題が発生しました。CSS の背景を使用して、単純なロールバー効果で画像のテキスト リンクを交換しています。画像はすべて同じ高さです (最初の各 div の 1 を除いて) ので、2 つの CSS ルールですべてを処理しようとしています。次に例を示します。
<div id="div1" class="common">
<a id="link0" class="big" href="link"></a>
<a id="link1" href="link"></a>
<a id="link2" href="link"></a>
<a class="class1" href="link"></a>
<a id="link3" href="link"></a>
</div>
<div id="div2" class="common">
...
</div>
等々。私は次のCSSを使用しています:
.class1
{
background:url(images/pdf.png);
display:block;
height:38px;
width:39px;
}
.common a:hover
{
background-position:0 -38px;
}
.common a.big:hover
{
background-position:0 -117px;
}
#div1
{
background:url(images/bg1.png);
}
#link0
{
background:url(images/big1.png);
display:block;
height:117px;
width:964px;
}
#link1
{
background:url(images/1_1.png);
display:block;
height:38px;
width:425px;
}
#link2
{
background:url(images/1_2.png);
display:block;
height:38px;
width:425px;
}
#link3
{
background:url(images/1_3.png);
display:block;
height:38px;
width:425px;
}
問題は、これが ID (#link0、#link1 など) を持つリンクにルールを適用していないように見えますbackground-position
が、ID を持たない 1 つのリンク (.class1) を選択することです。.common a:hover
セレクターをifに変更する#div1 a:hover
と、div ごとにルールが必要になります。これは、私がやろうとしていることとは逆です。
私は何を間違っていますか?JQuery は使用できません。純粋な CSS でなければなりません。