怎么设置才能让:active有效，让:hover无效？

在前端开发中，:active 和 :hover 是 CSS 伪类选择器，分别用于选择并为活动元素（例如，被用户按下但尚未释放的按钮）和悬停元素（用户鼠标指针悬停在其上的元素）应用样式。

如果你想要让 :active 有效而 :hover 无效，你可以通过为这两个状态分别定义样式来实现，并确保 :active 状态的样式覆盖或取消 :hover 状态的样式。以下是一个简单的例子：

/* 假设你有一个类名为 .my-button 的按钮 */

.my-button {
  /* 这里定义按钮的默认样式 */
  background-color: blue;
  color: white;
}

.my-button:hover {
  /* 这里定义按钮的悬停样式 */
  background-color: green;
  /* 其他你想要在悬停时应用的样式 */
}

.my-button:active {
  /* 这里定义按钮的活动样式 */
  background-color: red;
  /* 如果需要，可以通过设置与 :hover 相同的属性来“取消” :hover 的效果 */
  /* 例如，如果你不希望 :active 状态时保留 :hover 的任何特定样式，可以在这里重置它们 */
}

在这个例子中，.my-button:hover 定义了按钮在悬停时的样式（绿色背景），而 .my-button:active 定义了按钮在活动时的样式（红色背景）。当用户按下按钮时，:active 状态的样式将覆盖 :hover 状态的样式。

请注意，CSS 的特异性（specificity）和源顺序可能会影响这些规则的应用。如果 :hover 和 :active 状态有冲突的样式属性，并且它们的特异性相同，那么后出现的规则将覆盖先出现的规则。因此，确保 :active 规则在 :hover 规则之后定义可能是一个好做法。

另外，如果你想要完全“禁用” :hover 效果，你可以简单地不为 .my-button:hover 定义任何样式。这样，悬停时按钮将保持其默认样式。