纯CSS实现元素点击（非按住）触发持久效果的方法？

你的尝试失效的原因 #

• :active伪类不满足需求：:active只有在鼠标按住元素的时候才生效，松开就会恢复原状，根本没法实现“点击后保持状态”的效果。
• :visited伪类有严格限制：浏览器为了保护用户隐私，对:visited能修改的CSS属性卡得很死，像filter这种属性完全不支持，写了也白搭。

两种可行的实现方式 #

方式一：纯CSS实现（用checkbox模拟状态） #

借助隐藏的复选框来记录点击状态，通过兄弟选择器控制图片样式：

/* 把复选框藏起来 */
.img-toggle {
  display: none;
}

/* 图片默认样式，加上过渡动画更自然 */
.target-img {
  transition: filter 0.3s ease;
}

/* 复选框选中时，给图片加灰度滤镜 */
.img-toggle:checked + label .target-img {
  filter: grayscale(100%);
}

对应的HTML结构：

<input type="checkbox" id="toggle-img" class="img-toggle">
<label for="toggle-img">
  <img src="你的图片路径" class="target-img" alt="需要切换滤镜的图片">
</label>

点击图片所在的label，复选框就会切换选中状态，滤镜效果会一直保持，直到再次点击取消。

方式二：JavaScript控制类名 #

用JS监听点击事件，通过添加/移除自定义类来控制滤镜，适合更复杂的交互场景：

/* 定义灰度滤镜的类 */
.img-grayscale {
  filter: grayscale(100%);
}

.target-img {
  transition: filter 0.3s ease;
}

const targetImg = document.querySelector('.target-img');
targetImg.addEventListener('click', function() {
  this.classList.toggle('img-grayscale');
});

每次点击图片，就会切换img-grayscale类的存在，从而控制滤镜是否生效。

内容的提问来源于stack exchange，提问作者Zen