錨定標籤與css精靈圖像不會更改在活動

我有一個圖標附加到懸停上的錨標記我可以改變圖像，但點擊圖像a：active未應用。此問題是隻有當點擊不是文字的圖像時。錨定標籤與css精靈圖像不會更改在活動

CSS

.ctrls { 
     font-family: Arial; 
     font-size: 12px; 
     color: #000000; 
     text-decoration: none; 
    } 

.ctrls:hover { 
    text-decoration: none; 
} 

.ctrls .icon { 
    display: inline-block; 
    background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png); 
    background-repeat: no-repeat; 
    width: 16px; 
    height: 16px; 
    background-position: 0px -144px; 
} 

.ctrls:hover .icon { 
    background-position: 0px -252px; 
} 

.ctrls:active .icon { 
    background-position: 0px -252px; 
}

HTML

<span> 
     <a href="#" class="ctrls" id="signal1"> <span class="icon"></span>Signal1</a> 
     <a href="#" class="ctrls" id="signal2"> <span class="icon"></span>Signal2</a> 
     <a href="#" class="ctrls" id="signal3"> <span class="icon"></span>Signal3</a> 
    </span>

而且我在兩個不同的div這個代碼，以便在一個錨標記活動狀態不應該改變的另一個。任何想法？

來源

2013-10-21 user2779544

你有相同的背景位置:hover和:active。

改變它，它應該工作。

.ctrls:hover .icon { 
    background-position: 0px -252px; 
} 

.ctrls:active .icon { 
    background-position: 0px 0px; //change position 
}

要更改字體顏色使用

.ctrls:active{ 
     color:green; 
    }

Here is the fiddle.

:visited和:link風格只能通過顏色不同。 Read this for more information

來源

2013-10-21 09:01:32 Hiral

它是在點擊了文字工作正常，問題只在單擊該圖片 – user2779544

它也在努力像懸停 – Hiral

懸停工作正常，主動只發生了問題，即要在點擊過圖像（不是文字） – user2779544

錨定標籤與css精靈圖像不會更改在活動

回答

相關問題