如何在css中保持持久的背景颜色？
如何在css中保持持久的背景颜色？
提问于 2014-03-29 07:14:15
我有一个图像，当用户点击它时，我正在改变它的背景颜色。对于ex：
HTML：
<img src="images/image1.png" />CSS：
img:active{
background-color:red;
}但是红色并不持久。并且红色被旧颜色替换。我怎么才能让它持久呢？
回答 3
Stack Overflow用户
发布于 2014-03-29 07:16:59
OnClick功能不能仅仅通过CSS来实现。您将需要使用javascript来实现这一点。
Stack Overflow用户
发布于 2014-03-29 07:35:04
只需使用jQuery：
$('img').click(function(){
$(this).addClass('red');
});然后在css中，确保你有这样的东西：
img.red {
background-color:red;
}Stack Overflow用户
发布于 2014-03-29 08:04:34
正如其他人指出的那样，您应该使用带有onclick事件处理程序的javascript，保存被单击元素的状态并在正确的时间进行切换……然而，我想在不使用任何脚本的情况下介绍这个变通方法，它使用一些可聚焦的包装器(如button)来模仿其他不可聚焦的元素(如image)，并使用: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，试着单击图像，然后单击外部的某个点来查看它的实际效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22724767
复制相关文章
相似问题
腾讯云开发者
