Как применить активное состояние к спрайту CSS?

Question

Я создал спрайт css-флагов для использования в качестве ссылок на изображения для версии веб-сайта этой страны, над которым я работаю.

Проблема в том, что раньше использовались отдельные изображения флагов, и к флагу сайта, который вы посещали в настоящий момент, был применен активный класс - это был просто простой png, который окружал флаг в небольшой выделенной границе и стрелке под .

Проблема теперь в том, что используются спрайты. Как применить фоновое изображение к фоновому изображению? (Я не думаю, что на одну минуту есть способ решить эту проблему таким образом, но я уверен, что должно быть решение этой проблемы).

Вы можете увидеть это в действии здесь: http://jsfiddle.net/WNXNz/6/ Изображение активного состояния не загружено, но, как вы можете видеть, оно приводит к тому, что флаг Великобритании вообще не появляется.

Разметка

<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

Измените его так, чтобы активные стили применялись к <li>, или настройте изображение спрайта так, чтобы оно включало как неактивные, так и активные изображения, соответственно корректируя положение фона.

Answer 2

Наконец-то jsfiddle запущен. Я разветвил вашу скрипку и обновил HTML, CSS и добавил немного jQuery.

Есть несколько способов реализовать то, что вы пытаетесь сделать здесь. Как только вы хорошо разберетесь в том, как заставить это работать, вернитесь и затяните вещи. Выбранный ответ находится на правильном пути, но он также расплывчатый; это не поможет вам понять, что не так.

Я переместил назначение класса в тег <a>. Используйте изображение флага на фоне <a> и измените непрозрачность <a>, чтобы «выделить» его, когда он активен. Вы также можете использовать изображение внутри привязки <a> и установить непрозрачность для него, если хотите, но это не предпочтительный метод.

    #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 */
    }

Далее вам не хватает какого-либо скрипта для добавления / удаления активного класса в / из <a>, который сейчас находится в «активном» состоянии. Я проверил это с помощью jsfiddle , так что вы можете видеть, что он просто добавляет или удаляет класс из тех, которые меняются. В этом примере я использую hover, но все, что вам нужно сделать, это изменить hover на 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>

То, что вы делаете, задаете фоновую область <a> для изображения в вашем CSS. Параметр непрозрачности также установлен на <a>, поэтому фон кажется затемненным, пока не станет активным.