CSS 手机端 hover 点击后无法取消样式解决方案

在CSS中，为了在移动端实现类似“hover”的效果，可以使用:active伪类来表示点击的状态。然而，在某些情况下，点击后可能会出现样式无法撤销的问题。为了解决这个问题，可以使用:focus伪类来增强样式的特定性，确保在点击后样式能够正确撤销。

以下是一个简单的示例，展示了如何使用:focus伪类来解决点击后样式无法撤销的问题：

/* 定义按钮的基础样式 */
button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}
 
/* 当按钮被点击时的样式 */
button:active {
  background-color: #3e8e41;
}
 
/* 当按钮被点击后，通过:focus伪类保持被点击状态的样式 */
button:focus {
  outline: none;
}
 
/* 为了确保在移动端表现一致，可以添加触摸事件的监听 */
button.mobile-button {
  /* 添加触摸事件的样式 */
  -webkit-tap-highlight-color: transparent;
}

在HTML中，你可以这样使用这个按钮：

<button class="mobile-button">点击我</button>

在这个示例中，当按钮被点击后，:active伪类会应用，为按钮添加一个新的背景颜色。然后，:focus伪类会介入，确保即使是在移动端，点击后的样式也不会消失，从而解决了点击后样式无法撤销的问题。