CSS on Click - CSS

在网页开发中，我们通常会使用 JavaScript 来实现在用户与网页进行交互时，改变网页的样式等效果。但是，我们同样也可以使用 CSS 来实现这些效果。CSS on click 技术就是一种利用 CSS 实现在点击事件触发时改变样式的方法。

实现方法

CSS on click 技术的实现方法主要涉及以下两个步骤：

1. 给目标元素添加 class

首先，我们需要在 CSS 中创建一个样式，用于定义在点击事件触发时要改变的样式。然后，我们需要在 HTML 中给需要触发点击事件的元素添加一个 class 属性，用以绑定该样式。

/* 定义一个点击事件触发时的样式 */
.changeStyle {
  color: red;
  font-size: 20px;
}

<!-- 给需要触发点击事件的元素添加 class -->
<button class="clickMe">点击我</button>

2. 使用 :active 伪类选择器

接下来，我们需要使用 CSS 的 :active 伪类选择器，将该元素的样式绑定到刚才定义的点击事件触发时的样式上。

/* 使用 :active 伪类选择器绑定样式 */
.clickMe:active {
  color: red;
  font-size: 20px;
}

示例代码

部分浏览器不支持 :active 伪类选择器，因此我们可以使用 JavaScript 来实现点击事件，并在点击事件中切换 class。

<button class="myButton" onclick="this.classList.toggle('active')">点击我</button>

.myButton {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.active {
  background-color: #FF5733; /* Red */
}

总结

CSS on click 技术可以方便我们在网页上实现点击事件触发时的样式变化，而不需要依赖于 JavaScript 来实现。然而，由于浏览器的兼容性问题，我们有时需要在实现时加入 JavaScript 的辅助。