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;
}

问题是这似乎没有将background-position规则应用于具有 ID（#link0、#link1 等）的链接，但它确实选择了一个没有 ID（.class1）的链接。如果我将.common a:hover选择器更改为#div1 a:hoverif 有效，但我必须为每个 div 设置一个规则，这与我想要做的相反。

我究竟做错了什么？我不能使用 JQuery，它必须是纯 CSS。

4

1 回答 1

0

为此，您必须在 ID link0、link1等中定义背景图像而不是背景。这样写：

#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 回答