如何实现按钮多状态颜色效果？点击关闭后按钮变灰悬停标签仍白

首先要明确按钮被“关闭”后会添加的状态类（比如PrimeVue中禁用按钮通常自带p-button-disabled类，若为自定义状态可手动添加is-closed这类类名），以下以p-button-disabled为例给出解决方案：

/* 首次悬停时，标签文字变为白色 */
.p-button:hover .p-button-label {
  color: #ffffff !important;
}

/* 关闭状态下，按钮本身变为灰色 */
.p-button.p-button-disabled {
  background-color: #cccccc; /* 可根据需求调整灰色深浅 */
  border-color: #cccccc;
}

/* 关闭状态下悬停，保持标签文字为白色 */
.p-button.p-button-disabled:hover .p-button-label {
  color: #ffffff !important;
}

如果是自定义关闭状态类（比如你手动给按钮添加的is-closed），只需把上述代码中的p-button-disabled替换为自定义类名即可：

.p-button:hover .p-button-label {
  color: #ffffff !important;
}

.p-button.is-closed {
  background-color: #cccccc;
  border-color: #cccccc;
}

.p-button.is-closed:hover .p-button-label {
  color: #ffffff !important;
}

关键注意点 #

• 若按钮关闭状态没有自动生成状态类，需要在点击关闭按钮的JS逻辑中手动给按钮元素添加状态类（比如buttonElement.classList.add('is-closed')）；
• 单独定义关闭状态下的hover文字样式，避免被组件库默认的禁用状态文字样式覆盖。

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