CSS 按钮禁用悬停

简介

很多时候我们需要在表单中添加按钮，但有时候需要禁用按钮，避免重复提交。在这种情况下，通常需要禁用按钮并为其提供一个不同的样式，以表示其当前状态。本文将介绍如何使用 CSS 来实现按钮禁用悬停效果。

实现

我们可以使用伪类 :disabled 来实现按钮禁用悬停的效果。

button:disabled:hover {
  cursor: not-allowed;
  opacity: 0.6;
}

上述代码将为所有禁用状态的按钮添加一个悬停效果。在悬停时，将显示一个不可用的光标并将按钮的透明度降低以提醒用户。

示例

<button disabled>禁用按钮</button>
<button>可用按钮</button>

button:disabled:hover {
  cursor: not-allowed;
  opacity: 0.6;
}

在上述示例中，第一个按钮被禁用并添加了悬停效果，第二个按钮是可用状态。

总结

在表单中使用禁用按钮是很常见的场景。使用 CSS 可以很容易地实现按钮禁用悬停的效果，为用户提供更好的交互体验。