How to apply an active state to a CSS sprite?

Question

I have created a css sprite of flags to use as image links to that country's version of the website I am working on.

The problem is that before, individual flag images were used and an active class was applied to the flag of the site you were currently visiting - it was just a simple png that surrounded the flag in a little highlighted border and an arrow underneath.

The problem is now that sprites are being used, how do you apply a background image to a background image? (I don't imagine for one minute there is a way to solve this in this manner but I'm sure there must be a solution to this problem).

You can see it in action here: http://jsfiddle.net/WNXNz/6/ The active state image isn't uploaded but as you can see, it causes the UK flag not to appear at all.

Markup

<div id="footer-flags">
<ul>
    <li class="countryName">Region: </li>
    <li class="active countryFlag" id="uk"><a title="United Kingdom" href="javascript:void(0);"></a></li>

    <li class="countryFlag" id="us"><a title="United States" target="_blank" href="http://www.us-site.us"></a></li>

    <li class="countryFlag" id="ie"><a title="Ireland" target="_blank"  href="http://www.irish-site.ie"></a></li>

    <li class="countryFlag" id="de"><a title="Deutschland" target="_blank"   href="http://www.dutch-site.de"></a></li>

    <li class="countryFlag" id="fr"><a title="France" target="_blank"        href="http://www.french-site.fr"></a></li>

    <li class="countryFlag" id="nl"><a title="Nederland" target="_blank"      href="http://www.dutch-site.nl"></a></li>

    <li class="countryFlag" id="hr"><a title="Hrvatska" target="_blank" href="http://www.croatian-site.hr"></a></li>
</ul>

CSS

#footer-flags {
    float:right;    
}
#footer-flags ul {
    list-style-type: none;
    margin:-3px 0 0 0;
    overflow:hidden;
    padding:0;
}
    #footer-flags ul a {
        display: block;
        height: 11px;
        width: 14px;
        background-image: url(http://s8.postimage.org/z1sm5frn5/flags_sprite.jpg);
    }

    #footer-flags ul li {
        float:left;
        padding-left:5px;
        padding-top:3px;
    }
    #footer-flags #de a {
        background-position: 0px 0px;
    }
    #footer-flags #fr a {
        background-position: 0px -11px;
    }
    #footer-flags #hr a {
        background-position: 0px -22px;
    }
    #footer-flags #ie a {
        background-position: 0px -33px;
    }
    #footer-flags #nl {
        background-position: 0px -44px;
    }
    #footer-flags #uk a {
        background-position: 0px -55px;
    }
    #footer-flags #us a {
        background-position: 0px -66px;
    }

    #footer-flags ul li.active a {
        background:url("/img/flags/flag-highlight.png") no-repeat scroll left top transparent;
        margin-right:-5px;
        padding:3px 5px 5px;
    }

Answer 1

Change it so the active styles are applied to the <li> or adjust the sprite image to include both inactive and active images, adjusting background position appropriately.

Answer 2

Finally jsfiddle is up. I forked your fiddle and updated the HTML, CSS and added some jQuery.

There are several ways to implement what you're trying to do here. Once you get a good grasp on making it work, go back through and tighten things up. The selected answer is on the right track but it's also vague; it doesn't do much to help you understand what's wrong.

I moved the class assignment to the <a> tag. Use the flag image in the background of the <a> and change the opacity of the <a> to 'highlight' it when its active. You can also use an image inside in your anchor <a> and set the opacity for it if you wanted to but it's not a preferred method.

    #footer-flags ul li a{
        opacity:0.4;
        filter:alpha(opacity=70); /* For IE8 and earlier */
    }
    /* set the active class opacity to full */
    #footer-flags ul li a.active {  
        opacity:1.0;
        filter:alpha(opacity=100); /* For IE8 and earlier */
    }

Next, you're missing some script to add/remove the active class to/from the <a> that is now in the "active" state. I did test this with jsfiddle so you can see it just adds or removes the class to the ones that are changing. I use hover in this example but all you have to do is change hover to click.

<script>
$(document).ready(function(){
    $(".countryFlag").hover(function(eventObject){
        //remove highlight from current active
        $('a.active').toggleClass("active")
        //add highlight to the a that was clicked
        $(this).toggleClass("active");
    });
});
</script>

What you're doing is setting the background area of the <a> to the image in your CSS. The opacity setting is also to the <a> so the background appears dimmed until it becomes the active one.