按钮行为.单击后使悬停工作

Question

我有这个按钮：

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

我有这种风格的

button {
background-color: Transparent;
background-repeat:repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
color: white;
height: 64px;
}
button:hover {
background-color: rgba(0, 0, 0, 0.116);
}

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

button:focus:not(:focus-visible) {
background: transparent;
}
button:hover {
background-color: rgba(0, 0, 0, 0.116);
}
button:active {
background-color: Transparent;
}

我想要的行为是悬停始终有效，只有在单击按钮时才有效。单击后，使悬停始终处于活动状态，而从不将焦点放在按钮上。我的意思不是"；toggle"；按钮，但是该按钮总是返回到其默认状态并且等待被"激活"；按下"；再一次

希望我已经解释过了。

Answer 1

我假设您正在为此使用React。当按钮没有悬停时，即使您单击它，它也会返回到默认状态。但是，它不起作用，因为有其他东西在篡改您的按钮。试着检查开发人员工具和您的props.signOut函数，看看是否有任何错误。我的猜测是props.signOut中出现了问题，或者可能是另一个CSS干扰了按钮，因为您使用的不是类选择器，而是按钮选择器。