如何在css中保持背景颜色持久活跃？

Question

我有一张图片，当用户点击它时，我正在更改它的背景颜色。例如：

HTML：

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

CSS：

img:active{
    background-color:red;
}

但红色并不持久。红色用旧颜色代替。我怎样才能坚持下去？

Answer 1

OnClick功能无法通过CSS实现。您需要使用javascript来实现此目的。

Answer 2

只需使用jQuery：

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

然后在css中确保你有这样的东西：

img.red {
  background-color:red;
}

Answer 3

正如其他人指出的那样，你应该使用带有onclick事件处理程序的javascript，保存点击元素的状态并在正确的时间切换......但是我想在不使用的情况下介绍这种解决方法任何脚本，它使用一些可聚焦的包装器（如button）来模仿其他不可聚焦的元素（如image）并使用:focus伪类来设置活动<的样式/ em>元素（如您所知，它可以通过单击或标签处于这种状态）：

<强> 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，请点击图片，然后点击外面的某个点以查看它的实际效果。