点击

Question

我正在建立一个商店网站，我对产品的变化有疑问。所以我有主要产品。我有3个盒子，颜色有变化，当我将它们悬停时它会改变颜色，但是网站的更新要求我将它从可移动的更改为可点击。当我从

更改CSS时，它可以正常工作

img:hover 

到

img:active

但点击后颜色会返回上一个颜色。因此，点击颜色后可以保留，而不是回到以前的颜色。并且可以在没有JAVASCRIPT

的情况下完成

Answer 1

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #F4F4F4;
}
.box label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box input {
  visibility: hidden;
}
.box input:checked + label {
  background-color: red;
}

<div class="box">
  <input type="checkbox" id="test">
  <label class="color" for="test"></label>
</div>

Answer 2

:active表示“在点击时”，而不是“过去曾点击过”。它专为诸如在单击效果时创建3D按钮而设计。

CSS无法跟踪状态。

您可以使用:focus来破解某些内容，但是如果您要按Enter键，则可以指示您将激活的内容，因此对于此类内容几乎不是一个好选择。它也只允许你一次只关注一件事。

如果您想跟踪互动内容的状态：使用JavaScript 。

CSS不是为此而设计的。