按钮激活导致悬停效果故障
我一直在努力学习网络开发的基础知识（HTML、CSS 和 JS），所以我一直在尝试制作一个可用的苹果计算器。一切都工作正常，直到我注意到一个小错误。
一开始，操作按钮上的悬停效果效果很好，当我悬停时颜色变得更亮。当我按下按钮时，按钮会变得更加明亮并保持这种状态，直到用户输入另一个数字（或“等于”按钮）来与前一个数字进行操作。之后，操作按钮将变为正常颜色。在那之前，一切都很好，但我注意到，在用户按下按钮并进行操作后，悬停效果不再起作用，并且当鼠标悬停在其上时，它不再改变其颜色。< /p>
这是我编写的所有代码：
//HTML
<!DOCTYPE html>
<html>
<head>
<title>
Calulcadora
</title>
<link rel="stylesheet" href="botonesCalculadora.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body style="background-color: black;">
<div class="calculadora">
<div class="linea_botones">
<p class="barra-resultado" id="result">0</p>
</div>
<div class="linea_botones">
<button class=grey href="#" onclick="seleccionarBoton('especial', 'resetear');"> AC </button>
<button class=grey> ± </button> <!--Estos botones serán de broma-->
<button class=grey> ⁒ </button> <!--Estos botones serán de broma-->
<button class=orange id="division" href="#"
onclick="seleccionarBoton('operacion', 'division'); contadorOperacion = 1;"> ÷ </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '7');"> 7 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '8');"> 8 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '9');"> 9 </button>
<button class=orange id="multi" href="#"
onclick="seleccionarBoton('operacion', 'multi'); contadorOperacion = 1;"> × </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '4');"> 4 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '5');"> 5 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '6');"> 6 </button>
<button class=orange id="suma" href="#"
onclick="seleccionarBoton('operacion', 'suma'); contadorOperacion = 1;"> + </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '1');"> 1 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '2');"> 2 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '3');"> 3 </button>
<button class=orange id="resta" href="#"
onclick="seleccionarBoton('operacion', 'resta'); contadorOperacion = 1;"> − </button>
</div>
<div class="linea_botones">
<button class=blackZero href="#" onclick="seleccionarBoton('numero', '0');"> 0 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '.');"> . </button>
<button class=orange id="igual" href="#"
onclick="seleccionarBoton('operacion', 'igual'); contadorOperacion = 1;"> = </button>
</div>
</div>
<script type="text/javascript" src="calculadora.js"></script>
</body>
</html>
//CSS
button {
height: 64px;
width: 64px;
border-radius:32px;
font-size: 30px;
font-family: 'Open Sans', sans-serif;
border-style: none;
margin-top: 5px;
margin-left: 3px;
margin-bottom: 5px;
margin-right: 3px;
transition: filter 0.15s;
}
button:hover {
cursor: pointer;
filter: brightness(117%);
}
button:active {
filter: brightness(135%);
}
.orange {
background-color: orange;
color: white;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
/*font-weight: bold;*/
}
.black {
background-color: rgb(49,49,49);
color: white;
}
.blackZero{
background-color: rgb(49,49,49);
color: white;
width: 138px;
padding-right: 86px;
}
.grey {
background-color: rgb(159,159,159);
color: black;
}
.linea_botones {
margin-left: 25%;
margin-right: 25%;
margin-top: 0;
width: 50%;
text-align: center;
display: inline-block;
}
.barra-resultado {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
font-size: 64px;
width: 265px;
color: black;
text-align: right;
display: inline-block;
margin-bottom: 5px;
color: white;
}
.calculadora {
width: 80%;
display: block;
margin-left: 10%;
margin-right: 10%;
}
//JAVASCRIPT
let numeroOperar = null;
let numeroOperacion = null;
var operacion = null;
var operacionAnterior = null;
var flagOperacion = 0;
var digitosIngresados = 0;
let resultado = document.getElementById("result");
let resultadoOperacion = 0;
function seleccionarBoton(tipo, valor) {
switch (tipo) {
case 'numero': //Revisar casos de uso: "Poner dos veces punto decimal", "Oprimir dos veces una operacion"
if (digitosIngresados == 0 && valor == '0') {
resultado.innerHTML = '0';
numeroOperacion = 0;
break;
}
if (digitosIngresados == 0 && valor != '0') {
resultado.innerHTML = '';
resultado.innerHTML = valor;
numeroOperacion = parseFloat(valor);
digitosIngresados++;
break;
}
if (digitosIngresados > 0) {
resultado.innerHTML = resultado.innerHTML + valor;
numeroOperacion = (numeroOperacion * 10) + parseFloat(valor);
digitosIngresados++;
break;
}
break;
case 'operacion':
operacion = valor;
console.log("Contador: " + flagOperacion);
if (flagOperacion == 0) {
numeroOperar = numeroOperacion;
try {
resetearBoton(operacionAnterior);
} catch (error) {
//Vacío -> Que no haga nada
}
alterarBotonOperacion(valor);
operacionAnterior = operacion;
digitosIngresados = 0;
flagOperacion = 1;
break;
}
if (flagOperacion == 1) {
switch (operacionAnterior) {
case 'suma':
resultadoOperacion = sumarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'resta':
resultadoOperacion = restarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'multi':
resultadoOperacion = multiplicarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'division':
resultadoOperacion = dividirDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'igual':
flagOperacion = 0;
break;
}
digitosIngresados = 0;
operacionAnterior = operacion;
}
break;
case 'especial':
if (valor == 'resetear') {
resetearCalculadora();
}
break;
};
}
function resetearCalculadora() {
digitosIngresados = 0;
flagOperacion = 0;
resultado.innerHTML = '0';
numeroOperacion = 0;
numeroOperar = 0;
if (operacion == null) {
operacion == 'suma';
}
resetearBoton(operacion);
operacion = null;
}
function alternativaResetearCalculadora() {
location.reload();
}
function resetearBoton(palabra) {
botonOperacion = document.getElementById(palabra);
botonOperacion.style["filter"] = "none";
}
function alterarBotonOperacion(palabra) {
if (palabra == 'igual') {
return;
}
operacion = palabra;
botonOperacion = document.getElementById(palabra);
botonOperacion.style["filter"] = "brightness(135%)";
}
function resetearDuranteOperacion() {
as;
}
function sumarDosNumeros(a, b) {
return parseFloat(a) + parseFloat(b);
}
function restarDosNumeros(a, b) {
return parseFloat(a) - parseFloat(b);
}
function multiplicarDosNumeros(a, b) {
return parseFloat(a) * parseFloat(b);
}
function dividirDosNumeros(a, b) {
return parseFloat(a) / parseFloat(b);
}
我期望在使用按钮后，它仍然会保留悬停效果。每个操作按钮使用一次后，不再应用悬停效果。此问题仅出现在操作按钮上，数字或清除按钮也不会出现这种情况
