苹果计算器操作按钮激活后hover效果失效Bug求助

架构老林

2026-8-5

苹果计算器操作按钮Hover失效问题解决

问题描述

我正在学习Web开发基础（HTML、CSS、JS），尝试制作一个可运行的苹果计算器。初始状态下，操作按钮的hover效果正常，鼠标悬停时颜色变亮；点击按钮后会保持高亮状态，直到用户输入新数字或点击等号按钮完成运算，之后按钮恢复正常颜色。但发现完成一次运算操作后，操作按钮的hover效果不再生效，鼠标悬停时颜色不再变化，数字按钮和清除按钮无此问题。

完整代码

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> &#177; </button> <!--Estos botones serán de broma-->
            <button class=grey> &#8274; </button> <!--Estos botones serán de broma-->
            <button class=orange id="division" href="#"
                onclick="seleccionarBoton('operacion', 'division'); contadorOperacion = 1;"> &divide; </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;"> &times; </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;"> &plus; </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;"> &minus; </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;
}

.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':
            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) {
                }
                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);
}

问题根源

你通过JavaScript给操作按钮设置了内联样式（style["filter"]），而内联样式的优先级远高于CSS中定义的button:hover规则。当调用resetearBoton函数给按钮设置filter: none后，这个内联样式会一直附着在按钮元素上，完全覆盖了CSS的hover效果，导致后续鼠标悬停时无法触发亮度变化。

解决方案

改用CSS类来管理按钮的高亮状态，避免使用内联样式，这样不会干扰hover规则的生效。

步骤1：添加CSS高亮类

在现有CSS中新增一个类，用于标记操作按钮的高亮状态：

.orange.highlighted {
    filter: brightness(135%);
}

步骤2：修改JavaScript函数

替换原来的resetearBoton和alterarBotonOperacion函数，用类的添加/移除代替内联样式设置：

function resetearBoton(palabra) {
    if (!palabra) return; // 避免传入null时报错
    const botonOperacion = document.getElementById(palabra);
    botonOperacion.classList.remove("highlighted");
}

function alterarBotonOperacion(palabra) {
    if (palabra == 'igual') {
        return;
    }
    operacion = palabra;
    const botonOperacion = document.getElementById(palabra);
    // 先移除所有操作按钮的高亮，防止多个按钮同时高亮
    document.querySelectorAll(".orange").forEach(btn => btn.classList.remove("highlighted"));
    botonOperacion.classList.add("highlighted");
}

步骤3：修复重置函数的错误

原resetearCalculadora函数中有一行无效代码（operacion == 'suma'用了比较运算符而非赋值），同时调整重置逻辑：

function resetearCalculadora() {
    digitosIngresados = 0;
    flagOperacion = 0;
    resultado.innerHTML = '0';
    numeroOperacion = 0;
    numeroOperar = 0;
    resetearBoton(operacionAnterior); // 重置之前选中的操作按钮
    operacion = null;
    operacionAnterior = null;
}

可选：优化Hover效果优先级

如果想让高亮状态下的hover效果更明显，可以给不同状态的hover规则单独定义：

.orange:hover {
    filter: brightness(117%);
}

.orange.highlighted:hover {
    filter: brightness(145%); /* 高亮状态下hover亮度更高 */
}

这样修改后，操作按钮无论在运算前后，hover效果都能正常触发，同时高亮状态的管理也更规范。

内容的提问来源于stack exchange，提问作者Alejandro Barragán

苹果计算器操作按钮激活后hover效果失效Bug求助

问题描述 #

完整代码 #

HTML

CSS

JavaScript

问题根源 #

解决方案 #

步骤1：添加CSS高亮类 #

步骤2：修改JavaScript函数 #

步骤3：修复重置函数的错误 #

可选：优化Hover效果优先级 #