2

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 でなければなりません。

4

1 に答える 1

0

このためには、ID link0、link1などで背景の代わりにbackground-imageを定義する必要があります。次のように記述します。

#link0
{
    background-image:url(images/big1.png);
}

#link1
{
    background-image:url(images/1_1.png);
}

#link2
{
    background-image:url(images/1_2.png);
}

#link3
{
    background-image:url(images/1_3.png);
}
于 2012-10-23T08:42:31.787 に答える