按钮激活导致悬停效果故障
P粉548512637
P粉548512637 2024-04-01 21:51:26
[CSS3讨论组]

我一直在努力学习网络开发的基础知识(HTML、CSS 和 JS),所以我一直在尝试制作一个可用的苹果计算器。一切都工作正常,直到我注意到一个小错误。

一开始,操作按钮上的悬停效果效果很好,当我悬停时颜色变得更亮。当我按下按钮时,按钮会变得更加明亮并保持这种状态,直到用户输入另一个数字(或“等于”按钮)来与前一个数字进行操作。之后,操作按钮将变为正常颜色。在那之前,一切都很好,但我注意到,在用户按下按钮并进行操作后,悬停效果不再起作用,并且当鼠标悬停在其上时,它不再改变其颜色。< /p>

这是我编写的所有代码:

//HTML





    
        Calulcadora
    

    
    
    
    






    

0

//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); }

我期望在使用按钮后,它仍然会保留悬停效果。每个操作按钮使用一次后,不再应用悬停效果。此问题仅出现在操作按钮上,数字或清除按钮也不会出现这种情况

P粉548512637
P粉548512637

全部回复(1)
P粉808697471

悬停效果不再起作用,因为

function resetearBoton(palabra) {
    botonOperacion = document.getElementById(palabra);
    botonOperacion.style["filter"] = "none";
}

当这个函数运行时,它会为按钮设置一个内联样式(filter:none;),并且因为内联样式比外部样式表具有更高的优先级(botonesCalculadora.css),所以它覆盖你的

button:hover {
    cursor: pointer;
    filter: brightness(117%);
}

在buttonCalculator.css中


有两种方法可以解决这个问题

1 使用类

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";
  botonOperacion.classList.remove("active");
}

function alterarBotonOperacion(palabra) {
  if (palabra == "igual") {
    return;
  }
  operacion = palabra;
  botonOperacion = document.getElementById(palabra);
  botonOperacion.classList.add("active");
  // 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);
}
body {
  background: black;
}

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,
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%;
}

0

2 在重置功能中从按钮中删除样式属性而不是设置(filter:none;

function resetearBoton(palabra) {
    botonOperacion = document.getElementById(palabra);      function resetearBoton(palabra) {
    botonOperacion = document.getElementById(palabra);
//  botonOperacion.style["filter"] = "none";      /** remove this **/
    botonOperacion.removeAttribute("style");      /** add this **/
  }
}

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";  /** remove this **/
  botonOperacion.removeAttribute("style"); /** add this **/
}

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);
}
body {
  background: black;
}

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%;
}

0

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号