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起来了。我分叉了你的fiddle并更新了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 */
    }

接下来，您缺少一些脚本来向/从现在处于“active”状态的<a>添加/删除活动类。我使用jsfiddle对此进行了测试，因此您可以看到它只是将类添加或删除到正在更改的类。我在这个例子中使用悬停，但你所要做的就是将鼠标悬停改为点击。

<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>，因此背景会变暗，直到变为活动背景。

如何将活动状态应用于CSS精灵？

2 个答案: