如何將活動狀態應用於CSS sprite？

我已經創建了一個css標誌精靈，用作圖像鏈接到我正在工作的該國家/地區的網站版本。如何將活動狀態應用於CSS sprite？

問題是，以前，使用單個標誌圖像，並將活動類應用於您當前正在訪問的網站的標誌 - 這只是一個簡單的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; 
    }

來源

2011-11-23 martincarlin87

最後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 */ 
    }

接下來，你錯過了一些腳本中添加/ <a>，現在是在「活動」狀態清除活性類/。我did用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>

你在做什麼是你的CSS的<a>的背景區域設置圖像。不透明度設置也與<a>相同，因此背景會變暗，直至變爲活動的背景。

來源

2013-02-23 17:21:59

改變它，以便將活性樣式被應用到<li>或調整子畫面圖像以包括非活動和活動圖像，適當調整背景位置。

來源

2011-11-23 12:14:31 roryf

如何將活動狀態應用於CSS sprite？

回答

相關問題