Question

I am trying to condense my CSS a bit but I’ve hit a snag with this. I am using CSS backgrounds to swap out some text links for images with a simple rollever effect. The images are all the same height (apart from 1 in each div, the first one) so I’m trying to handle them all with 2 CSS rules, one for all of them and one for the bigger first link. Here’s an example:

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

And so on. I’m using the following 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;
}

The problem is that this doesn’t seem to apply the background-position rule to the links with ID’s (#link0, #link1 etc) but it does select the one link which does not have an ID (.class1). If I change the .common a:hover selector to #div1 a:hover if works but then I have to have a rule for each div, which is the opposite of what I’m trying to do.

What am I doing wrong? I cannot use JQuery, it has to be pure CSS.

Answer 1

For this you have to define background-image instead of background in your ID link0 ,link1 etc. Write like this:

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