我设置了一个切换，所以当我点击按钮时，按钮会获得'selecionado'类并更改边框颜色。但是当我悬停并点击时，颜色会保持悬停颜色，直到我移除鼠标。如何更改它，以便当我点击时，'selecionado'类的颜色会立即出现，就像悬停颜色的优先级一样？
This is what happens
Javascript：
const botaops = document.querySelector("#IdProntoSocorro")
const botaoEnf = document.querySelector("#IdEnfermaria")
const botaoAmb = document.querySelector("#IdAmbulatorio")
botaops.addEventListener("click", function() {
botaops.classList.toggle("selecionado");
});
botaoEnf.addEventListener("click", function() {
botaoEnf.classList.toggle("selecionado");
});
botaoAmb.addEventListener("click", function() {
botaoAmb.classList.toggle("selecionado");
});CSS：
button:hover {
border: 3px solid rgb(129, 129, 129);
background: red;
}
.selecionado{
border: 3px solid rgb(18, 101, 255);
}单击时要叠加在悬停效果上的单击颜色！
2条答案
按热度按时间kognpnkq1#
增加第二条规则的具体性：
eh57zj3b2#
将
:not(.selecionado)添加到悬停选择器中，使其仅在类不活动时生效。请注意，
.click处理程序仅在您释放鼠标时生效。如果这对您来说太晚了，并且您希望它在您最初按下鼠标时生效，请使用mousedown。