Html 按钮行为。单击后使悬停生效

我有这个按钮：

<li><button type='button' class='button' onClick={props.signOut} >Log Out</button></li>

我的问题是，当我点击时，悬停不再起作用，直到我点击其他地方，按钮的焦点丢失。 我根据尝试了不同的html按钮类型（按钮、提交和重置），并尝试了许多css伪类以不同顺序应用它们的方法：

button:focus:not(:focus-visible) {
  background: transparent;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.116);
}

button:active {
  background-color: Transparent;
}

我想要的行为是，除了单击按钮外，悬停始终有效。单击后，使悬停始终处于活动状态，而不将焦点放在按钮上。我的意思不是“切换”按钮，而是一个总是回到默认状态并等待再次“按下”的按钮

---

希望我已经解释过了。

我假设您正在使用React来实现此目的。当按钮即使在您单击后也未悬停时，假定该按钮将返回其默认状态。但是，它不工作，因为有其他东西正在篡改您的按钮。尝试检查开发人员工具和props.signOut函数，查看是否有任何错误。我猜是道具出了问题。注销或者其他CSS干扰了按钮，因为您没有使用类选择器，而是使用按钮选择器。

您使用React吗？尝试使用“className”应用类？是的，我使用React我通过NavLink解决了问题

注销

使用按钮

className='button'

无法实现这种行为会产生同样的结果。无论如何，谢谢你的建议谢谢你的回答。我正在使用react but

道具。注销与按钮无关，没有错误记录。我不明白为什么按钮的行为会改变。它将保持切换状态，样式将更改，直到焦点丢失…我使用NavLink workaorund解决了它（请参见问题）。
button:focus:not(:focus-visible) {
  background: transparent;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.116);
}

button:active {
  background-color: Transparent;
}