如何在css中保持背景色持續活動？

我有一個圖像，當用戶點擊它時，我正在改變它的背景顏色。爲前：如何在css中保持背景色持續活動？

HTML：

<img src="images/image1.png" />

CSS：

img:active{ 
    background-color:red; 
}

但紅色是不是永久性的。紅色被替換爲舊的顏色。我怎樣才能使它持久？

來源

2014-03-28 user3470629

'：active'定義如下：_「：當用戶激活一個元素時，激活僞類應用。例如，在用戶按下鼠標按鈕並釋放它的時間之間。「_ - 所以這不是你想要的。你將不得不設置一個類或其他的東西來使圖像的這種狀態可以從CSS的正常狀態中辨別出來。 – CBroe

閱讀[onclick]（http://www.w3schools.com/jsref/event_onclick.asp）事件。只有您點擊時，「active」才起作用。 – rolory

僅通過CSS無法實現OnClick功能。你將需要使用JavaScript來實現這一點。

來源

2014-03-28 23:16:58

只需使用jQuery：

$('img').click(function(){ 
    $(this).addClass('red'); 
});

然後在CSS確保你有這樣的事情：

img.red { 
    background-color:red; 
}

來源

2014-03-28 23:35:04 dima

正如其他人所指出的，你應該使用JavaScript和onclick事件處理程序，節省點擊的元素的狀態並在正確的時間切換...但是我想介紹這種解決方法，而不使用任何腳本，它使用一些可調焦的包裝（如button）來模仿其他不可聚焦的元素（如image）和我們E中的:focus僞類（通過單擊或Tab鍵，你明白，它可以在這樣的狀態下）樣式的活躍元素：

HTML：

<button class="wrapper"> 
    <img/> 
</button>

CSS：

.wrapper > img { 
    background-color:inherit; 
    width:200px; 
    height:200px;   
} 
.wrapper { 
    border:none; 
    padding:0; 
    cursor:default; 
} 
.wrapper:focus { 
    background-color:red; 
    outline:none; 
}

這裏是working fiddle，請嘗試點擊圖片，然後點擊一下外面的一點看到它在行動中。

來源

2014-03-29 00:04:34

如何在css中保持背景色持續活動？

回答

相關問題