CSS IMG：懸停工作，IMG：主動是不是

Question

我有下面的代碼，當其上空盤旋，採用無邊框顯示在我的表中的圖像，然後橙色邊框：

table.test { 
} 
.test img { 
    border: solid 4px transparent; 
} 
.test img:hover { 
    border-color: orange; 
} 

如果嘗試接下來，我希望邊框在點擊後保持橙色，但不是

.test img:active { 
    border-color: orange; 
} 

正在使用的圖像是縮略圖大小而不是複選框。

任何想法如何保持點擊後的邊界橙色？

Answer 1

您可以創建一個名爲orangeborder（或任何其他類）的類。給它的屬性border-color:orange;。

然後你可以使用jQuery和使用：

$('img').click(function(){ 
    $(this).toggleClass('orangeborder'); 
}); 

jsFiddle

Answer 2

檢查這個fiddle可能會幫助您使用簡單的jQuery讓你給你的輸出

$('.test img').on('click', function(){ 
     //use jquery css function 
    $(this).css({"border-color":"orange"}); 
// or add class .active with your own style 
     $(this).addClass('active'); 
}) 

讓您的圖像塊元素並添加這個jquery點擊事件。解決

Answer 3

圖像不能使用活動。 http://www.whatwg.org/specs/web-apps/current-work/multipage/selectors.html#selector-active.Wrap它在一個錨點內，並防止錨點上的默認值，並更改光標可能？