Html 点击即可更改产品

我正在建立一个商店网站，我有问题的变化的产品。所以我有主要产品。我有3个不同颜色的框，当我悬停它们时，它会改变颜色，但网站的更新需要我将其从可悬停更改为可点击。当我将CSS从

img:hover 

到

---

但单击后，颜色将返回到上一个颜色。所以可以在点击颜色后保持不变，而不是回到以前的颜色。没有JAVASCRIPT也能完成吗？

：active

的意思是“被点击时”，而不是“过去被点击过”。它是为创建一个3D按钮而设计的，当你点击它时，它会被按下

CSS无法跟踪状态

您可能可以使用

：focus

攻击某些内容，但这是为了指示如果按Enter键，您将激活哪些内容，因此这类操作几乎从来都不是一个好的选择。它也只允许你一次专注于一件事

---

如果要跟踪交互内容的状态：请使用JavaScript

CSS不是为此而设计的。

.box{
位置：相对位置；
宽度：100px；
高度：100px；
背景色：#F4；
}
.盒子标签{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.框输入{
可见性：隐藏；
}
.框输入：选中+标签{
背景色：红色；
}

mcve在哪里？什么是mcve？：DIt可以通过使用CSS和可攻击的方法来完成，使用

：target

或

：checked

，但我建议使用JavaScript，它比CSS解决方案更直接。重复我关闭此帖子后你是如何发布的？我太棒了。不知道，太好了。。不过我没有投反对票。通过将输入包装在label元素中，而不是将标签放置在输入旁边，可以使效果更好。如果您不知道，您可以参考MDN文档中的标签元素。有趣的解决方案！不过，我会将其设置为单选按钮，这样当您选择另一个单选按钮时，它会自动取消选择。但从本质上讲，解决方案保持不变。您必须为元素指定一个名称，以指示哪些收音机组合在一起：

type=“radio”name=“product”

谢谢！的确，这可能是一个很好的工作流程。不管怎么说，基本的都放好了，如何填写细节取决于彼此：）这并不是绝对正确的，但是所有的JS免费解决方案都感觉有点不对劲。

img:active