cari

Rumah  >  Soal Jawab  >  teks badan

Pengaktifan butang menyebabkan kesan hover tidak berfungsi

Saya telah cuba mempelajari asas pembangunan web (HTML, CSS dan JS), jadi saya telah cuba membuat kalkulator Apple yang berfungsi. Semuanya berfungsi dengan baik sehingga saya perasan pepijat kecil.

Pada mulanya, kesan hover pada butang aksi berfungsi dengan baik, warna menjadi lebih cerah semasa saya melayang. Apabila saya menekan butang, butang menjadi lebih cerah dan kekal seperti itu sehingga pengguna memasukkan nombor lain (atau butang "sama") untuk melakukan sesuatu dengan nombor sebelumnya. Selepas itu, butang tindakan akan bertukar kepada warna biasa. Sehingga itu, semuanya baik-baik saja, tetapi saya perhatikan bahawa selepas pengguna menekan butang dan mengambil tindakan, kesan hover tidak lagi berfungsi dan ia tidak lagi berubah warna apabila tetikus melayang di atasnya. < /p>

Ini semua kod yang saya tulis: 

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

Saya menjangkakan bahawa selepas menggunakan butang, ia masih mengekalkan kesan hover. Selepas setiap butang tindakan digunakan sekali, kesan tuding tidak lagi digunakan. Isu ini hanya berlaku dengan butang tindakan, bukan dengan nombor atau butang jelas sama ada

P粉548512637P粉548512637262 hari yang lalu563

membalas semua(1)saya akan balas

  • P粉808697471

    P粉8086974712024-04-02 09:27:49

    Kesan hover tidak lagi berfungsi kerana 

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

    Apabila fungsi ini berjalan, ia menetapkan gaya sebaris untuk butang (penapis:tiada;), dan kerana gaya sebaris mempunyai keutamaan yang lebih tinggi daripada helaian gaya luaran (botonesCalculadora.css), ia mengatasi milik anda 

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

    Dalam butangKalkulator.css

    Terdapat dua cara untuk menyelesaikan masalah ini

    1 kelas penggunaan

    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 Alih keluar atribut gaya daripada butang dan bukannya tetapkan dalam fungsi set semula (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

    balas
    0
  • Batalbalas