如何正确使用CSS中的:active伪类？hover过渡仅生效问题求助

首先明确：:active伪类的默认行为就是按住鼠标点击元素时触发，松开后会回到hover或默认状态，这是浏览器的标准表现，无需修改。

针对你“仅在hover状态时启用过渡效果”的需求，调整代码如下：

/* 设置按钮默认样式，可替换为你原本的默认背景色 */
.Subscribe-button {
  background-color: #e0e0e0;
}

.Subscribe-button:hover {
  background-color: rgba(150, 0, 0, 0.917);
  /* 仅在hover状态添加过渡，鼠标移出时无过渡动画 */
  transition: background-color 1s;
}

.Subscribe-button:active {
  background-color: black;
  /* 点击时禁用过渡，直接切换到黑色 */
  transition: none;
}

效果说明 #

• 鼠标悬停按钮：从默认色平滑过渡到暗红色，实现你需要的hover状态过渡效果。
• 按住鼠标点击：按钮直接变成黑色，无过渡动画，符合:active的即时反馈需求。
• 鼠标移出按钮：直接变回默认色，不会有过渡，因为过渡属性仅存在于hover状态中。

如果希望鼠标移出时也有过渡效果，只需把transition: background-color 1s;移到.Subscribe-button的默认样式里，但这会让所有状态变化（包括默认到active）都带过渡，不符合你“仅在hover状态启用过渡”的要求，因此上面的写法是最优解。

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